JSFiddle - React, Tailwind, and code Playground

by extempl

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
      .box{
        width: 50px;
        height: 50px;
        background-color: #111;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="box"></div>
    <script>
      $(function () {
        var multiplier = 0;
            var $window = $(window);
            var $box = $('.box');
            var objOffsetX;
            var moveOffsetX;
            var initialPageY;
            $window.on('touchstart', function (event) {
              event.preventDefault();
              var touch = event.originalEvent.touches[0];
              objOffsetX = $box.offset().top;
              moveOffsetX = objOffsetX - touch.pageY;
              initialPageY = touch.pageY;
            });
            $window.on('touchmove', function (event) {
              event.preventDefault();
              var touch = event.originalEvent.touches[0];
              var positionX = touch.pageY * multiplier - initialPageY * (multiplier - 1) + moveOffsetX ;
              $box.offset({top:positionX});
            });
      });
    </script>
  </body>
</html>