Pure javascript draggable element
I know there is an example of this on the internet, but each example is different and my own implementation. I am trying to figure out what is wrong with my implementation as it is not working as expected.
snippet of code:
var mousePressX = -1;
var mousePressY = -1;
document.getElementById("contextMenu").addEventListener("mousedown", function(event) {
mousePressX = event.clientX;
mousePressY = event.clientY;
}, false);
document.getElementById("contextMenu").addEventListener("mouseup", function(event) {
mousePressX = -1;
mousePressY = -1;
}, false);
document.getElementById("contextMenu").addEventListener("mousemove", function(event) {
if (mousePressX != -1 && mousePressY != -1) {
repositionElement(event.target, event.clientX, event.clientY);
}
}, false);
function repositionElement(element, currentMouseX, currentMouseY) {
element.style.left = element.offsetLeft + (currentMouseX - mousePressX) + 'px';
element.style.top = element.offsetTop + (currentMouseY - mousePressY) + 'px';
}
jsfiddle: http://jsfiddle.net/4rLctko8/
can't figure out what happened, but I noticed that if I change the following lines:
element.style.left = element.offsetLeft + (currentMouseX - mousePressX) + 'px';
element.style.top = element.offsetTop + (currentMouseY - mousePressY) + 'px';
to:
element.style.left = currentMouseX - mousePressX + 'px';
element.style.top = currentMouseY - mousePressY + 'px';
The element will only be dragged correctly when it is dragged towards the positive x-axis (right) and towards the positive y-axis (bottom), and when the mouse is launched, it will be positioned somewhere near the left-most top corner region (about 0.0)
source to share
Interestingly enough, I've only done this with jQuery so far. Rewrote it a bit and made sure that every mousemove has it removed after listening for events - this would be a memory leak that you might otherwise start handling:
var contextmenu = document.getElementById('contextMenu');
var initX, initY, mousePressX, mousePressY;
contextmenu.addEventListener('mousedown', function(event) {
initX = this.offsetLeft;
initY = this.offsetTop;
mousePressX = event.clientX;
mousePressY = event.clientY;
this.addEventListener('mousemove', repositionElement, false);
window.addEventListener('mouseup', function() {
contextmenu.removeEventListener('mousemove', repositionElement, false);
}, false);
}, false);
function repositionElement(event) {
this.style.left = initX + event.clientX - mousePressX + 'px';
this.style.top = initY + event.clientY - mousePressY + 'px';
}
Seems to work well. :-)
+++++++++++++++++++++++++++++++++++++++++++++++ +++ +++++++++++++++++++++++
Edit - I would think to add a touch-enabled version (although newer devices seem to emulate mouse events). Not like jQuery, where you can select multiple event listeners, so it's basically repetition, only with touch events:
http://codepen.io/Shikkediel/pen/VLZKor?editors=011
var object = document.getElementById('element'),
initX, initY, firstX, firstY;
object.addEventListener('mousedown', function(e) {
e.preventDefault();
initX = this.offsetLeft;
initY = this.offsetTop;
firstX = e.pageX;
firstY = e.pageY;
this.addEventListener('mousemove', dragIt, false);
window.addEventListener('mouseup', function() {
object.removeEventListener('mousemove', dragIt, false);
}, false);
}, false);
object.addEventListener('touchstart', function(e) {
e.preventDefault();
initX = this.offsetLeft;
initY = this.offsetTop;
var touch = e.touches;
firstX = touch[0].pageX;
firstY = touch[0].pageY;
this.addEventListener('touchmove', swipeIt, false);
window.addEventListener('touchend', function(e) {
e.preventDefault();
object.removeEventListener('touchmove', swipeIt, false);
}, false);
}, false);
function dragIt(e) {
this.style.left = initX+e.pageX-firstX + 'px';
this.style.top = initY+e.pageY-firstY + 'px';
}
function swipeIt(e) {
var contact = e.touches;
this.style.left = initX+contact[0].pageX-firstX + 'px';
this.style.top = initY+contact[0].pageY-firstY + 'px';
}
source to share