Moveable/draggable

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('mou…

Accepted Answer

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';
}​
```

Moveable/draggable <div>

Solution

Problem

Related problems