accessibility/mobile/simple-box-drag.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple box drag example</title>
    <style>
      html {
        font-family: sans-serif;
        overflow: hidden;
      }

      body {
        background: #ffe;
        margin: 0;
      }

      div {
        background-color: #1FE200;
        background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.4));
        width: 200px;
        height: 150px;
        border: 1px solid green;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div></div>

    <script>
      document.body.width = window.innerWidth;
      document.body.height = window.innerHeight;

      let mouseX, mouseY;

      document.onmousemove = function(e) {
        mouseX = e.clientX;
        mouseY = e.clientY;
      }

      const div = document.querySelector('div');

      let initialMouseX = null;

      let initialMouseY = null;

      var initialBoxX, initialBoxY, rAF;

      div.onmousedown = function() {
        initialBoxX = div.offsetLeft;
        initialBoxY = div.offsetTop;
        movePanel();
      }

      document.onmouseup = stopMove;

      function movePanel() {
        if(initialMouseX === null) {
          initialMouseX = mouseX;
          initialMouseY = mouseY;
        } else {
          let mouseMoveX = mouseX - initialMouseX;
          let mouseMoveY = mouseY - initialMouseY;

          let offsetX = initialBoxX + mouseMoveX;
          let offsetY = initialBoxY + mouseMoveY;
          console.log(offsetX + ' ' + offsetY);

          div.style.left = offsetX + 'px';
          div.style.top = offsetY + 'px';
        }

        rAF = requestAnimationFrame(movePanel);
      }

      function stopMove() {
        cancelAnimationFrame(rAF);

        console.log('mousemove stopped');

        initialMouseX = null;
        initialMouseY = null;
      }

    </script>
  </body>
</html>