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; document.querySelector(dragHandle).addEventListener("mousedown", startDrag, true); document.querySelector(dragHandle).addEventListener("touchstart", startDrag, true); /*sets offset parameters and starts listening for mouse-move*/ function startDrag(e) { e.preventDefault(); 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(); 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') function makeDragable2(dragHandle2, dragTarget2) { let dragObj2 = null; //object to be moved let xOffset2 = 0; //used to prevent dragged object jumping to mouse location let yOffset2 = 0; document.querySelector(dragHandle2).addEventListener("mousedown", startDrag2, true); document.querySelector(dragHandle2).addEventListener("touchstart", startDrag2, true); /*sets offset parameters and starts listening for mouse-move*/ function startDrag2(x) { x.preventDefault(); x.stopPropagation(); dragObj2 = document.querySelector(dragTarget2); dragObj2.style.position = "absolute"; let rect = dragObj2.getBoundingClientRect(); if (x.type=="mousedown") { xOffset2 = x.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport' yOffset2 = x.clientY - rect.top; window.addEventListener('mousemove', dragObject2, true); } else if(e.type=="touchstart") { xOffset2 = x.targetTouches[0].clientX - rect.left; yOffset2 = x.targetTouches[0].clientY - rect.top; window.addEventListener('touchmove', dragObject2, true); } } /*Drag object*/ function dragObject2(x) { x.preventDefault(); x.stopPropagation(); if(dragObj2 == null) { return; // if there is no object being dragged then do nothing } else if(x.type=="mousemove") { dragObj2.style.left = x.clientX-xOffset2 +"px"; // adjust location of dragged object so doesn't jump to mouse position dragObj2.style.top = x.clientY-yOffset2 +"px"; } else if(x.type=="touchmove") { dragObj2.style.left = x.targetTouches[0].clientX-xOffset2 +"px"; // adjust location of dragged object so doesn't jump to mouse position dragObj2.style.top = x.targetTouches[0].clientY-yOffset2 +"px"; } } /*End dragging*/ document.onmouseup = function(x) { if (dragObj2) { dragObj2 = null; window.removeEventListener('mousemove', dragObject2, true); window.removeEventListener('touchmove', dragObject2, true); } } } makeDragable2('#week_05header', '#week_05')