Update '12/dragable.js'

12/dragable.js

@@ -61,10 +61,10 @@ makeDragable('#shell_03header', '#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 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(dragHandle).addEventListener("mousedown", startDrag, true);
   document.querySelector(dragHandle).addEventListener("touchstart", startDrag, true);
@@ -73,18 +73,18 @@ makeDragable('#shell_03header', '#shell_03')
   function startDrag(e) {
     e.preventDefault();
     e.stopPropagation();
-    dragObj = document.querySelector(dragTarget);
-    dragObj.style.position = "absolute";
-    let rect = dragObj.getBoundingClientRect();
+    dragObj2 = document.querySelector(dragTarget);
+    dragObj2.style.position = "absolute";
+    let rect = dragObj2.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);
+      xOffset2 = e.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport'
+      yOffset2 = e.clientY - rect.top;
+      window.addEventListener('mousemove', dragObject2, 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);
+      xOffset2 = e.targetTouches[0].clientX - rect.left;
+      yOffset2 = e.targetTouches[0].clientY - rect.top;
+      window.addEventListener('touchmove', dragObject2, true);
     }
   }
 
@@ -96,17 +96,17 @@ makeDragable('#shell_03header', '#shell_03')
     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";
+      dragObj2.style.left = e.clientX-xOffset2 +"px"; // adjust location of dragged object so doesn't jump to mouse position
+      dragObj2.style.top = e.clientY-yOffset2 +"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";
+      dragObj2.style.left = e.targetTouches[0].clientX-xOffset2 +"px"; // adjust location of dragged object so doesn't jump to mouse position
+      dragObj2.style.top = e.targetTouches[0].clientY-yOffset2 +"px";
     }
   }
 
   /*End dragging*/
   document.onmouseup = function(e) {
-    if (dragObj) {
+    if (dragObj2) {
       dragObj = null;
       window.removeEventListener('mousemove', dragObject, true);
       window.removeEventListener('touchmove', dragObject, true);
@@ -114,7 +114,7 @@ makeDragable('#shell_03header', '#shell_03')
   }
 }
 
-makeDragable('#audio_05header', '#audio_05')
+makeDragable2('#audio_05header', '#audio_05')