Moveable/draggable <div>

Question

This is my updated and modified script, it works completely, except I would like to universalize it... observe the **** how can I make it so that I don't have to do function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e); everytime I need to use the dragable function for a different element?

window.onload = addListeners;  var BOX = function(){   return{     Draggable: function(){}   }; }();  function addListeners(){   document.getElementById('div').addEventListener('contextmenu', menumove, false);   **document.getElementById('div').addEventListener('mousedown', function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);}, false);** }  function elementDraggable(e){   var e = e || window.event;   var div = BOX.Draggable.elemen;   BOX.Draggable.innerX = e.clientX + window.pageXOffset - div.offsetLeft;   BOX.Draggable.innerY = e.clientY + window.pageYOffset - div.offsetTop;    window.addEventListener('mousemove', elementMove, false);   window.addEventListener('mouseup', function(){     window.removeEventListener('mousemove', elementMove, false);     }, true);    function elementMove(e){     div.style.position = 'absolute';     div.style.left = e.clientX + window.pageXOffset - BOX.Draggable.innerX + 'px';     div.style.top = e.clientY + window.pageYOffset - BOX.Draggable.innerY + 'px';   } } 

Answer 1

Is jQuery an option for you? It makes what you are doing really simple since the code already exists.

http://jqueryui.com/demos/draggable/

Demo

JavaScript Code

window.onload = addListeners;  function addListeners(){     document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);     window.addEventListener('mouseup', mouseUp, false);  }  function mouseUp() {     window.removeEventListener('mousemove', divMove, true); }  function mouseDown(e){   window.addEventListener('mousemove', divMove, true); }  function divMove(e){     var div = document.getElementById('dxy');   div.style.position = 'absolute';   div.style.top = e.clientY + 'px';   div.style.left = e.clientX + 'px'; }​ 

Answer 2

This is a nice no-jQuery script to drag a div: http://jsfiddle.net/g6m5t8co/1/

var mydragg = function() {   return {     move: function(divid, xpos, ypos) {       divid.style.left = xpos + 'px';       divid.style.top = ypos + 'px';     },     startMoving: function(divid, container, evt) {       evt = evt || window.event;       var posX = evt.clientX,         posY = evt.clientY,         divTop = divid.style.top,         divLeft = divid.style.left,         eWi = parseInt(divid.style.width),         eHe = parseInt(divid.style.height),         cWi = parseInt(document.getElementById(container).style.width),         cHe = parseInt(document.getElementById(container).style.height);       document.getElementById(container).style.cursor = 'move';       divTop = divTop.replace('px', '');       divLeft = divLeft.replace('px', '');       var diffX = posX - divLeft,         diffY = posY - divTop;       document.onmousemove = function(evt) {         evt = evt || window.event;         var posX = evt.clientX,           posY = evt.clientY,           aX = posX - diffX,           aY = posY - diffY;         if (aX < 0) aX = 0;         if (aY < 0) aY = 0;         if (aX + eWi > cWi) aX = cWi - eWi;         if (aY + eHe > cHe) aY = cHe - eHe;         mydragg.move(divid, aX, aY);       }     },     stopMoving: function(container) {       var a = document.createElement('script');       document.getElementById(container).style.cursor = 'default';       document.onmousemove = function() {}     },   } }();

#container {   position: absolute;   background-color: blue; }  #elem {   position: absolute;   background-color: green;   -webkit-user-select: none;   -moz-user-select: none;   -o-user-select: none;   -ms-user-select: none;   -khtml-user-select: none;   user-select: none; }

<div id='container' style="width: 600px;height: 400px;top:50px;left:50px;">   <div id="elem" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 200px;height: 100px;">     <div style='width:100%;height:100%;padding:10px'>       <select id=test>         <option value=1>first           <option value=2>second       </select>       <INPUT TYPE=text value="123">     </div>   </div> </div>