Created
March 16, 2020 22:59
-
-
Save Falciighol/5d3aa1157b6d004cbe9ef2f4c01303e8 to your computer and use it in GitHub Desktop.
[Draggable Element] Draggable HTML element script. #js #javascript
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
dragElement(document.getElementsByClassName("btn-group")[0]); | |
function dragElement(elmnt) { | |
var pos1 = 0, | |
pos2 = 0, | |
pos3 = 0, | |
pos4 = 0; | |
if (document.getElementsByClassName(elmnt.className + "-header")[0]) { | |
// if present, the header is where you move the DIV from: | |
document.getElementsByClassName(elmnt.className + "-header")[0].onmousedown = dragMouseDown; | |
} else { | |
// otherwise, move the DIV from anywhere inside the DIV: | |
elmnt.onmousedown = dragMouseDown; | |
} | |
function dragMouseDown(e) { | |
e = e || window.event; | |
e.preventDefault(); | |
// get the mouse cursor position at startup: | |
pos3 = e.clientX; | |
pos4 = e.clientY; | |
document.onmouseup = closeDragElement; | |
// call a function whenever the cursor moves: | |
document.onmousemove = elementDrag; | |
} | |
function elementDrag(e) { | |
e = e || window.event; | |
e.preventDefault(); | |
// calculate the new cursor position: | |
pos1 = pos3 - e.clientX; | |
pos2 = pos4 - e.clientY; | |
pos3 = e.clientX; | |
pos4 = e.clientY; | |
// set the element's new position: | |
elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; | |
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; | |
} | |
function closeDragElement() { | |
// stop moving when mouse button is released: | |
document.onmouseup = null; | |
document.onmousemove = null; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment