Merge branch 'master' of ssh://git.xpub.nl:2501/XPUB/issue.xpub.nl

12/dragable.js

@@ -1,5 +1,5 @@
 // Make the DIV element draggable:
-dragElement(document.getElementById("shell_03header"));
+dragElement(document.getElementById("shell_03"));
 
 function dragElement(elmnt) {
   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
@@ -44,7 +44,7 @@ function dragElement(elmnt) {
 
 
 // Make the DIV element draggable:
-dragElement(document.getElementById("audio_05header"));
+dragElement(document.getElementById("audio_05"));
 
 function dragElement(elmnt) {
   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
@@ -85,4 +85,5 @@ function dragElement(elmnt) {
     document.onmouseup = null;
     document.onmousemove = null;
   }
-}
+}
+

12/index.html

@@ -67,7 +67,7 @@
       </div>
       <div id="table_content_05">
         <ul>
-          <li id="track_5_1"><span class="numbers_table_content_05">1</span> ...</li>
+          <li id="track_5_1"><span class="numbers_table_content_05">1</span> Do.as, Mika, 5'17''</li>
           <li id="track_5_2"><span class="numbers_table_content_05">2</span> ...</li>
           <li id="track_5_3"><span class="numbers_table_content_05">3</span> ...</li>
           <li id="track_5_4"><span class="numbers_table_content_05">4</span> ...</li>
@@ -265,7 +265,7 @@
   </div><!--  <div class="contributors"> -->
   <script src="player2.js"></script> 
   <script src="liveplayer.js"></script> 
-  <script src="dragable.js"></script> 
+  <!--script src="dragable.js"></script--> 
   <script>
 
 			player(document.querySelector("#week_04"), document.querySelector("#iframe_04"));    
@@ -299,6 +299,81 @@
             document.querySelector(".audio_05 #resources_icon").addEventListener("click",function(){
               document.querySelector("#implicancies_05 #resources_05").classList.toggle("hidden");
             });
+    
+    
+    
+    
+    
+    
+    
+    var dragItem = document.querySelector("#shell_03");
+    var container = document.querySelector("#implicancies_05");
+
+    var active = false;
+    var currentX;
+    var currentY;
+    var initialX;
+    var initialY;
+    var xOffset = 0;
+    var yOffset = 0;
+
+    container.addEventListener("touchstart", dragStart, false);
+    container.addEventListener("touchend", dragEnd, false);
+    container.addEventListener("touchmove", drag, false);
+
+    container.addEventListener("mousedown", dragStart, false);
+    container.addEventListener("mouseup", dragEnd, false);
+    container.addEventListener("mousemove", drag, false);
+
+    function dragStart(e) {
+      if (e.type === "touchstart") {
+        initialX = e.touches[0].clientX - xOffset;
+        initialY = e.touches[0].clientY - yOffset;
+      } else {
+        initialX = e.clientX - xOffset;
+        initialY = e.clientY - yOffset;
+      }
+
+      if (e.target === dragItem) {
+        active = true;
+      }
+    }
+
+    function dragEnd(e) {
+      initialX = currentX;
+      initialY = currentY;
+
+      active = false;
+    }
+
+    function drag(e) {
+      if (active) {
+      
+        e.preventDefault();
+      
+        if (e.type === "touchmove") {
+          currentX = e.touches[0].clientX - initialX;
+          currentY = e.touches[0].clientY - initialY;
+        } else {
+          currentX = e.clientX - initialX;
+          currentY = e.clientY - initialY;
+        }
+
+        xOffset = currentX;
+        yOffset = currentY;
+
+        setTranslate(currentX, currentY, dragItem);
+      }
+    }
+
+    function setTranslate(xPos, yPos, el) {
+      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
+    }
+    
+    
+    
+    
+    
             
             
   </script>