From 2e66f3449897fb1d5950b8f04b3e8bfea7783cd4 Mon Sep 17 00:00:00 2001
From: Max Lehmann <maxlehmann@xpub.nl>
Date: Thu, 11 Jun 2020 11:32:58 +0200
Subject: [PATCH] Update '12/index.html'

---
 12/index.html | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/12/index.html b/12/index.html
index 4cc1146..b2d3755 100644
--- a/12/index.html
+++ b/12/index.html
@@ -300,6 +300,73 @@
             });
     
       
+    
+    
+    
+    
+    
+    
+    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')
+    
+    
+    
+    
+    
+    
+    
             
   </script>
 </body>