Created
November 4, 2018 12:39
-
-
Save wall-e-08/ae505740d9760663e447b43d1180f8dd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function draggable(element) { | |
var isMouseDown = false; | |
// initial mouse X and Y for `mousedown` | |
var mouseX; | |
var mouseY; | |
// element X and Y before and after move | |
var elementX = element.style.left; | |
var elementY = element.style.top; | |
// mouse button down over the element | |
element.addEventListener('mousedown', onMouseDown); | |
/** | |
* Listens to `mousedown` event. | |
* | |
* @param {Object} event - The event. | |
*/ | |
function onMouseDown(event) { | |
mouseX = event.clientX; | |
mouseY = event.clientY; | |
isMouseDown = true; | |
} | |
// mouse button released | |
element.addEventListener('mouseup', onMouseUp); | |
/** | |
* Listens to `mouseup` event. | |
* | |
* @param {Object} event - The event. | |
*/ | |
function onMouseUp(event) { | |
isMouseDown = false; | |
elementX = parseInt(element.style.left) || 0; | |
elementY = parseInt(element.style.top) || 0; | |
} | |
// need to attach to the entire document | |
// in order to take full width and height | |
// this ensures the element keeps up with the mouse | |
document.addEventListener('mousemove', onMouseMove); | |
/** | |
* Listens to `mousemove` event. | |
* | |
* @param {Object} event - The event. | |
*/ | |
function onMouseMove(event) { | |
if (!isMouseDown) return; | |
var deltaX = event.clientX - mouseX; | |
var deltaY = event.clientY - mouseY; | |
element.style.left = elementX + deltaX + 'px'; | |
element.style.top = elementY + deltaY + 'px'; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment