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>