Javascript Use Drag To Move Element

How does one set the position of an element? When the user drags an element (an image), I'd like to have it move synchronously. I see that my 'mousemove' handler is being called. H

Solution 1:

Not sure about your actual implementation. However this code works:

To do it using your code, here is the code. One obvious issue with your code is you need to add 'px' to your style.left and style.right. Also it is unknown how you actually handle the event from your code. Using this code, the element moves in a circle, you need to fix it but you get the idea.

var divOverlay = document.getElementById ("overlay");
var isDown = false;
divOverlay.addEventListener('mousedown', function(e) {
    isDown = true;
}, true);

document.addEventListener('mouseup', function() {
  isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
   event.preventDefault();
   if (isDown) {
   var deltaX = event.movementX;
   var deltaY = event.movementY;
  var rect = divOverlay.getBoundingClientRect();
  divOverlay.style.left = rect.x + deltaX + 'px';
  divOverlay.style.top  = rect.x + deltaX + 'px';
 }
}, true);

---

Below is another way of doing it. Codepen example

var offset = [0,0];
var divOverlay = document.getElementById ("overlay");
var isDown = false;

divOverlay.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
    divOverlay.offsetLeft - e.clientX,
    divOverlay.offsetTop - e.clientY
 ];
}, true);

document.addEventListener('mouseup', function() {
   isDown = false;
}, true);

document.addEventListener('mousemove', function(e) {
    event.preventDefault();
    if (isDown) {
        divOverlay.style.left = (e.clientX + offset[0]) + 'px';
        divOverlay.style.top  = (e.clientY + offset[1]) + 'px';
   }
}, true);

Solution 2:

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 : http://jsfiddle.net/wfbY8/4/

JavaScript Code

window.onload = addListeners;

functionaddListeners(){
    document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);

}

functionmouseUp()
{
    window.removeEventListener('mousemove', divMove, true);
}

functionmouseDown(e){
  window.addEventListener('mousemove', divMove, true);
}

functiondivMove(e){
    var div = document.getElementById('dxy');
  div.style.position = 'absolute';
  div.style.top = e.clientY + 'px';
  div.style.left = e.clientX + 'px';
}​

Solution 3:

I did make something similar few weeks ago for Angular, see here. It might help you a bit.

Basically, I wanted to do something you're probably thinking of doing, but to use drag events you also need to drop the elements you're dragging (at least that's what I ended up searching). So if you just want to drag/move the elements you need to be able to set their position on the page using top, bottom and left, right styles. So you those elements must have the position fixed or absolute ideally.

Then you go for the core of this, which is to calculate vector your going to move the element with. Because mousemove event only dispatches the MouseEvent which get you an access to mouse coordinates, you can count up in what vector your mouse has moved and move the element by the same vector.

Basically what I did was (hope it's understandable in ES5):

var elementPosition = [0,0];
var mousePosition   = [0,0];
var element         = document.getElementById('yourElement');

var mainEH = function (event) {
    mousePosition = [event.clientX, event.clientY];
    document.addEventListener('mousemove', calcEH);
    document.addEventListener('mouseup', removeHandlers);
    document.addEventListener('contextmenu', removeHandlers);
};

var calcEH = function (event) {
    var vector      = [-mousePosition[0] + event.clientX, -mousePosition[1] + event.clientY];
    mousePosition   = [mousePosition[0] + vector[0], mousePosition[1] + vector[1]];
    elementPosition = [elementPosition[0] + vector[0], elementPosition[1] + vector[1]];
    updatePosition();
};

var removeHandlers = function () {
    document.removeEventListener('mousemove', calcEH);
    document.removeEventListener('mouseup', removeHandlers);
    document.removeEventListener('contextmenu', removeHandlers);
};

functionupdatePosition() {
    element.style.left = elementPosition[0] + "px";
    element.style.top  = elementPosition[1] + "px";
}

element.addEventListener('mousedown', mainEH, true);

I'm not sure if this exact code is working as I cannot test it now, but you can see here how I did this using angular. Hope it'll work just fine for you. At least you get the idea. Anyway, you might need to run some function that sets up initial position of the element for you.

UPDATE

I've just realized that it's not exactly what you're looking for. If I understood you correctly you want to move the whole element while dragging and dropping. However I will probably leave the answer here because the solution might be pretty much similar. I would probably do it by using the logic I posted before and to actually be able to move the element I would set it's position to absolute while mousemove event is fired, then on mouseup you can remove position absolute attribute.