terrarium finished!

4 years ago · 9ef1be26b8
parent 129e630643
commit 9ef1be26b8
2 changed files with 47 additions and 0 deletions
--- a/learn/terrarium/index.html
+++ b/learn/terrarium/index.html
@ -6,6 +6,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./style.css" />
+    <script src="./script.js" defer></script>
  </head>
  <body>
    <h1 style="color: red">My Terrarium</h1>
--- a/learn/terrarium/script.js
+++ b/learn/terrarium/script.js
@ -0,0 +1,46 @@
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+
+function dragElement(terrariumElement) {
+  //set 4 positions for positioning on the screen
+
+  let pos1 = 0, 
+        pos2 = 0,
+        pos3 = 0,
+        pos4 = 0;
+  terrariumElement.onpointerdown = pointerDrag;
+
+  function pointerDrag(e) {
+    e.preventDefault();
+    console.log(e);
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onpointermove = elementDrag;
+    document.onpointerup = stopElementDrag;
+  }
+  function elementDrag(e) {
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    console.log(pos1, pos2, pos3, pos4);
+    terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+    terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+  }
+  function stopElementDrag() {
+    document.onpointerup = null;
+    document.onpointermove = null;
+  }
+}