add draggable

4 years ago · 88a7b13f9d
4 changed files with 60 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+images/
--- a/pycache/hello.cpython-36.pyc
+++ b/pycache/hello.cpython-36.pyc
--- a/static/js/draggable.js
+++ b/static/js/draggable.js
@ -0,0 +1,43 @@
+//Make the DIV element draggagle:
+dragElement(document.getElementById("draggable"));
+
+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;
+  }
+
+  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/hello.html
+++ b/templates/hello.html
@ -1,7 +1,23 @@
 <!doctype html>
+<html>
+<style>
+#draggable {
+  position: absolute;
+}
+</style>
+<head>
 <title>Hello from Flask</title>
 {% if name %}
  <h1>Hello {{ name }}!</h1>
 {% else %}
  <h1>VVVW</h1>
 {% endif %}
+</head>
+
+<body>
+  <div id="draggable">
+    <img src="../static/images/test1.jpeg" width='500px'  alt="test">
+  </div>
+<script src="../static/js/draggable.js"></script>
+</body>
+</html>