jquery - How to drag an element using javascript? -

i'm working on project needs pictures draggable across page. found jquery ui useful solution working expected sadly cannot use in project. instead, needed using pure javascript only. googling, came this: http://jsfiddle.net/tovic/xcb8d/light/

this perfect, problem was using ids means can't have multiple draggable items across page. modified use classes: http://jsfiddle.net/xcb8d/690/. problem code though both elements draggable, once start dragging second element it's x_elem , y_elem off. leads element move far direction mouse. know causing this?

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... var draggables = document.getelementsbyclassname('draggable-element'); for(i = 0; < draggables.length; i++) {     draggables[i].onmousedown = function () {         _drag_init(this);         return false;     }; }  document.onmousemove = _move_elem; document.onmouseup = _destroy;