Skip to content


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.srcElement; elementDraggable(e); everytime I need to use the dragable function for a different element?

window.onload = addListeners;

var BOX = function(){
    Draggable: function(){}

function addListeners(){
  document.getElementById('div').addEventListener('contextmenu', menumove, false);
  **document.getElementById('div').addEventListener('mousedown', function(e){BOX.Draggable.elemen = || 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){ = 'absolute'; = e.clientX + window.pageXOffset - BOX.Draggable.innerX + 'px'; = e.clientY + window.pageYOffset - BOX.Draggable.innerY + 'px';



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


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'); = 'absolute'; = e.clientY + 'px'; = e.clientX + 'px';
User contributions licensed under: CC BY-SA
9 People found this is helpful