タケノコ取り

      
        <img src="../../kago.jpg" id="kago" width="50px"><br>
        <div id="app">
          <img src="../../タケノコ.jpg" id="noko" width="30px">
        </div>
        <script>
          let noko = document.getElementById("noko");
          noko.style.top = 100 + "px";
          noko.style.left = 450 + "px";
          noko.style.position = "absolute";
          noko.ondragstart = function(event){
          return false;
        }
          noko.onmousedown = function(event){
          document.addEventListener("mousemove",onMouseMove);
          }
          let onMouseMove = function(event){
            let x = event.clientX;
            let y = event.clientY;
            let width = noko.offsetWidth;
            let height = noko.offsetHeight;
            noko.style.top = (y-height/2) + "px";
            noko.style.left = (x-width/2) + "px";
          }
          noko.onmouseup = function(event){
            let x = event.clientX;
            let y = event.clientY;
            let width = noko.offsetWidth;
            let height = noko.offsetHeight;
            let kagoRect = kago.getBoundingClientRect();
            if((x>=kagoRect.left && x<=(kagoRect.left+kagoRect.width)) && (y>=kagoRect.top && y<=(kagoRect.top+kagoRect.height))){
              let app = document.getElementById("app");
              app.removeChild(noko);
            }
            document.removeEventListener("mousemove",onMouseMove);
          }
        </script>