accessibility/mobile/multi-control-box-drag.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title>Multi control 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 posX, posY;

      document.onmousemove = positionHandler;
      document.ontouchmove = positionHandler;

      function positionHandler(e) {
        if ((e.clientX)&&(e.clientY)) {
          posX = e.clientX;
          posY = e.clientY;
        } else if (e.targetTouches) {
          posX = e.targetTouches[0].clientX;
          posY = e.targetTouches[0].clientY;
          e.preventDefault();
        }
      }

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

      let initialPosX = null;

      let initialPosY = null;

      let rAF;

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

      div.ontouchstart = function(e) {
        initialBoxX = div.offsetLeft;
        initialBoxY = div.offsetTop;
        positionHandler(e);
        movePanel();
      }

      document.onmouseup = stopMove;
      document.ontouchend = stopMove;

      function movePanel() {
        if(initialPosX === null) {
          initialPosX = posX;
          initialPosY = posY;
        } else {
          let posMoveX = posX - initialPosX;
          let posMoveY = posY - initialPosY;

          let offsetX = initialBoxX + posMoveX;
          let offsetY = initialBoxY + posMoveY;

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

        rAF = requestAnimationFrame(movePanel);
      }

      function stopMove() {
        cancelAnimationFrame(rAF);

        initialPosX = null;
        initialPosY = null;
      }
    </script>
  </body>
</html>