draggable and opacity

4 years ago · c3e5cc645e
5 changed files with 37 additions and 44 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,2 @@
 __pycache__/
+static/audio/
--- a/static/audio/FreshMythsDifferentTimes_performance_podcast.mp3
+++ b/static/audio/FreshMythsDifferentTimes_performance_podcast.mp3
--- a/static/css/style.css
+++ b/static/css/style.css
@ -1,7 +1,11 @@
-* {
+/* * {
  background-color: red;
-}
+} */

 #video1 {
  padding-top: 100px;
 }
+
+.draggable img {
+  opacity: 0.7;
+}
--- a/static/js/draggable.js
+++ b/static/js/draggable.js
@ -1,43 +1,21 @@
-//Make the DIV element draggagle:
-dragElement(document.getElementById("draggable"));
+// draggable
+$(document).ready(function() {
+    var a = 3;
+    var dragOpts = {
+          cursor: "move",
+          cursor: "grab",
+          // axis: "y",
+          distance: "0",
+          // cursorAt: {
+          //   top: 0,
+          //   left: 0
+          // }
+        };

-function dragElement(elmnt) {
-  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-  if (document.getElementById(elmnt.id + "header")) {
-    /* if present, the header is where you move the DIV from:*/
-    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
-  } else {
-    /* otherwise, move the DIV from anywhere inside the DIV:*/
-    elmnt.onmousedown = dragMouseDown;
-  }
+    $('.draggable').draggable({
+   start: function(event, ui) { $(this).css("z-index", a++); }
+});

-  function dragMouseDown(e) {
-    e = e || window.event;
-    e.preventDefault();
-    // get the mouse cursor position at startup:
-    pos3 = e.clientX;
-    pos4 = e.clientY;
-    document.onmouseup = closeDragElement;
-    // call a function whenever the cursor moves:
-    document.onmousemove = elementDrag;
-  }

-  function elementDrag(e) {
-    e = e || window.event;
-    e.preventDefault();
-    // calculate the new cursor position:
-    pos1 = pos3 - e.clientX;
-    pos2 = pos4 - e.clientY;
-    pos3 = e.clientX;
-    pos4 = e.clientY;
-    // set the element's new position:
-    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
-    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
-  }

-  function closeDragElement() {
-    /* stop moving when mouse button is released:*/
-    document.onmouseup = null;
-    document.onmousemove = null;
-  }
-}
+  });
--- a/templates/perspectiveB.html
+++ b/templates/perspectiveB.html
@ -1,19 +1,29 @@
 <!doctype html>
 <html>
 <style>
-#draggable {
+.draggable {
  position: absolute;
 }
 </style>
+<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="../static/js/draggable.js"></script>
+<link href="../static/css/style.css" rel="stylesheet" type="text/css">
 <head>
 <title>PerspectiveB</title>
 <h1>VVVW - PerspectiveB</h1>
 </head>

 <body>
-  <div id="draggable">
+  <div class="draggable">
    <img src="../static/images/test1.jpeg" width='500px'  alt="test">
  </div>
-<script src="../static/js/draggable.js"></script>
+  <div class="draggable">
+    <img src="../static/images/test2.jpeg" width='500px'  alt="test">
+  </div>
+  <div class="draggable">
+    <img src="../static/images/test3.jpeg" width='500px'  alt="test">
+  </div>
+
 </body>
 </html>