Update '12/dragable.js'
parent
01fccfb242
commit
7da96c5dd9
@ -1,89 +1,60 @@
|
||||
// Make the DIV element draggable:
|
||||
dragElement(document.getElementById("shell_03"));
|
||||
|
||||
function makeDragable(dragHandle, dragTarget) {
|
||||
let dragObj = null; //object to be moved
|
||||
let xOffset = 0; //used to prevent dragged object jumping to mouse location
|
||||
let yOffset = 0;
|
||||
|
||||
function dragElement(elmnt) {
|
||||
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
|
||||
if (document.getElementById(elmnt.id + "header")) {
|
||||
// if present, the header is where you move the DIV from:
|
||||
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
|
||||
} else {
|
||||
// otherwise, move the DIV from anywhere inside the DIV:
|
||||
elmnt.onmousedown = dragMouseDown;
|
||||
}
|
||||
document.querySelector(dragHandle).addEventListener("mousedown", startDrag, true);
|
||||
document.querySelector(dragHandle).addEventListener("touchstart", startDrag, true);
|
||||
|
||||
function dragMouseDown(e) {
|
||||
e = e || window.event;
|
||||
/*sets offset parameters and starts listening for mouse-move*/
|
||||
function startDrag(e) {
|
||||
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.stopPropagation();
|
||||
dragObj = document.querySelector(dragTarget);
|
||||
dragObj.style.position = "absolute";
|
||||
let rect = dragObj.getBoundingClientRect();
|
||||
|
||||
if (e.type=="mousedown") {
|
||||
xOffset = e.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport'
|
||||
yOffset = e.clientY - rect.top;
|
||||
window.addEventListener('mousemove', dragObject, true);
|
||||
} else if(e.type=="touchstart") {
|
||||
xOffset = e.targetTouches[0].clientX - rect.left;
|
||||
yOffset = e.targetTouches[0].clientY - rect.top;
|
||||
window.addEventListener('touchmove', dragObject, true);
|
||||
}
|
||||
}
|
||||
|
||||
/*Drag object*/
|
||||
function dragObject(e) {
|
||||
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;
|
||||
e.stopPropagation();
|
||||
|
||||
if(dragObj == null) {
|
||||
return; // if there is no object being dragged then do nothing
|
||||
} else if(e.type=="mousemove") {
|
||||
dragObj.style.left = e.clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
|
||||
dragObj.style.top = e.clientY-yOffset +"px";
|
||||
} else if(e.type=="touchmove") {
|
||||
dragObj.style.left = e.targetTouches[0].clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
|
||||
dragObj.style.top = e.targetTouches[0].clientY-yOffset +"px";
|
||||
}
|
||||
}
|
||||
|
||||
/*End dragging*/
|
||||
document.onmouseup = function(e) {
|
||||
if (dragObj) {
|
||||
dragObj = null;
|
||||
window.removeEventListener('mousemove', dragObject, true);
|
||||
window.removeEventListener('touchmove', dragObject, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
makeDragable('#shell_03header', '#shell_03')
|
||||
makeDragable('#audio_05header', '#audio_05')
|
||||
|
||||
// Make the DIV element draggable:
|
||||
dragElement(document.getElementById("audio_05"));
|
||||
|
||||
function dragElement(elmnt) {
|
||||
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
|
||||
if (document.getElementById(elmnt.id + "header")) {
|
||||
// if present, the header is where you move the DIV from:
|
||||
document.getElementById(elmnt.id + "header").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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue