javascript - Drag each element separately -

i'm making gadget system in javascript win7 sidebar, can use 1 element. if use two, elements can have same position or don't work. need can use more 1 elements , drag each 1 separately (each 1 particular positions).

i have 1 element. how can turn work more one?

var selected = null, // object of element moved      x_pos = 0, y_pos = 0, // stores x & y coordinates of mouse pointer      x_elem = 0, y_elem = 0; // stores top, left values (edge) of element    // called when user starts dragging element  function _drag_init(elem) {      // store object of element needs moved      selected = elem;      x_elem = x_pos - selected.offsetleft;      y_elem = y_pos - selected.offsettop;  }    // called when user dragging element  function _move_elem(e) {      x_pos = document.all ? window.event.clientx : e.pagex;      y_pos = document.all ? window.event.clienty : e.pagey;      if (selected !== null) {          selected.style.left = (x_pos - x_elem) + 'px';          selected.style.top = (y_pos - y_elem) + 'px';      }  }    // destroy object when done  function _destroy() {      selected = null;  }    // bind functions...  document.getelementbyid('draggable-element').onmousedown = function () {      _drag_init(this);      return false;  };    document.onmousemove = _move_elem;  document.onmouseup = _destroy;

body {padding:10px}    #draggable-element {    width:125px;    height:125px;    background-color:#666;    color:white;    padding:10px 12px;    cursor:move;    position:relative; /* important (all position that's not `static`) */  }

<div id="draggable-element">gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>

fiddle

two things note:

1. if want on multiple elements need either use class's or tags.
2. in _drag_init() function, set x_elem , y_elem equal x_pos , y_pos changed in _move_elem() function. add's in current positioning elements offset. rid of selected.offset

however, there still other calculation issues need work out

var selected = null, // object of element moved      x_pos = 0, y_pos = 0, // stores x & y coordinates of mouse pointer      x_elem = 0, y_elem = 0; // stores top, left values (edge) of element    // called when user starts dragging element  function _drag_init(elem) {      // store object of element needs moved      selected = elem;      x_elem = x_pos ;      y_elem = y_pos;  }    // called when user dragging element  function _move_elem(e) {      x_pos = document.all ? window.event.clientx : e.pagex;      y_pos = document.all ? window.event.clienty : e.pagey;      if (selected !== null) {          selected.style.left = (x_pos - x_elem) + 'px';          selected.style.top = (y_pos - y_elem) + 'px';      }  }    // destroy object when done  function _destroy() {      selected = null;  }    // bind functions...  var draggables = document.getelementsbyclassname('draggable-element');  for(var = 0; < draggables.length; i++){    draggables[i].onmousedown = function () {        _drag_init(this);        return false;    };  }    document.onmousemove = _move_elem;  document.onmouseup = _destroy;

body {padding:10px}    .draggable-element {    width:125px;    height:125px;    background-color:#666;    color:white;    padding:10px 12px;    cursor:move;    position:relative; /* important (all position that's not `static`) */  }

<div class="draggable-element">gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>  <div class="draggable-element">gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>  <div class="draggable-element">gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>  <div class="draggable-element">gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>  <div class="draggable-element">gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>  <div class="draggable-element">gadget!<div style="width:20px;height:100%;background:#000;position:absolute;top:0;right:-25px"></div></div>