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;
  }
 }