updates

Author: paladique

docs/04-js/src/script02.js

@@ -1,7 +1,3 @@
-// This is our JavaScript file. We'll add code here in the upcoming lessons.
-
-let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-
 function dragElement(terrariumElement) {
-    // Function body will be added in upcoming lessons.
-}
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+}

docs/04-js/src/script03.js

@@ -1,9 +1,6 @@
-let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-
 function dragElement(terrariumElement) {
-    // Function body will be added in upcoming lessons.
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
 }
 
-// Select plant elements
-document.getElementById('plant1');
-document.getElementById('plant2');
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));

docs/04-js/src/script04.js

@@ -1,12 +1,32 @@
-let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-
 function dragElement(terrariumElement) {
+    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;
+        terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+        terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
+    }
+
+    function stopElementDrag() {
+        document.onpointerup = null;
+        document.onpointermove = null;
+    }
 }
 
-document.getElementById('plant1').onpointerdown = function() {
-    dragElement(document.getElementById('plant1'));
-};
-document.getElementById('plant2').onpointerdown = function() {
-    dragElement(document.getElementById('plant2'));
-};
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));

docs/04-js/src/script05.js

@@ -1,11 +1,10 @@
-let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-
 function dragElement(terrariumElement) {
     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;
@@ -27,9 +26,17 @@ function dragElement(terrariumElement) {
     }
 }
 
-document.getElementById('plant1').onpointerdown = function() {
-    dragElement(document.getElementById('plant1'));
-};
-document.getElementById('plant2').onpointerdown = function() {
-    dragElement(document.getElementById('plant2'));
-};
+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'));