diff --git a/12/dragable.js b/12/dragable.js index f5a62f1..fda5e13 100644 --- a/12/dragable.js +++ b/12/dragable.js @@ -56,4 +56,67 @@ 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", startDrag, true); + document.querySelector(dragHandle2).addEventListener("touchstart", startDrag, true); + + /*sets offset parameters and starts listening for mouse-move*/ + function startDrag(x) { + e.preventDefault(); + e.stopPropagation(); + dragObj2 = document.querySelector(dragTarget); + 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(e.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', dragObject, true); + window.removeEventListener('touchmove', dragObject, true); + } + } +} + +makeDragable2('#week_05header', '#week_05') + + + \ No newline at end of file