Skip to content

Instantly share code, notes, and snippets.

@AlexKardone

AlexKardone/Drag&Drop an element in the page

Created May 7, 2019 05:27
Show Gist options
  • Save AlexKardone/b70587d084516d3a24b4317a5576757d to your computer and use it in GitHub Desktop.
Save AlexKardone/b70587d084516d3a24b4317a5576757d to your computer and use it in GitHub Desktop.
Download ZIP
Drag&Drop an element in the page
Raw
Drag&Drop an element in the page
'use strict';
var setup = document.querySelector('.setup');
var dialogHandler = setup.querySelector('.setup-user input');
dialogHandler.addEventListener('mousedown', function(evt) {
evt.preventDefault();
var startCoords = {
x: evt.clientX,
y: evt.clientY
};
var dragged = false;
var onMouseMove = function(moveEvt) {
moveEvt.preventDefault();
dragged = true;
var shift = {
x: startCoords.x - moveEvt.clientX,
y: startCoords.y - moveEvt.clientY
};
startCoords = {
x: moveEvt.clientX,
y: moveEvt.clientY
};
setup.style.top = (setup.offsetTop - shift.y) + 'px';
setup.style.left = (setup.offsetLeft - shift.x) + 'px';
};
var onMouseUp = function(upEvt) {
upEvt.preventDefault();
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
if (dragged) {
var onClickPreventDefault = function(evt) {
evt.preventDefault();
dialogHandler.removeEventListener('click', onClickPreventDefault)
};
dialogHandler.addEventListener('click', onClickPreventDefault);
}
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment