JSFiddle - React, Tailwind, and code Playground

by extempl

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <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 $window = $(window);
        var $box = $('.box');
        var objOffsetX;
        var moveOffsetX;
        $window.on('touchstart', function (event) {
          event.preventDefault();
          var touch = event.originalEvent.touches[0];
          objOffsetX = $box.offset().top;
          moveOffsetX = objOffsetX - touch.pageY;
        });
        $window.on('touchmove', function (event) {
          event.preventDefault();
          var touch = event.originalEvent.touches[0];
          var positionX = touch.pageY * 2 + moveOffsetX ;
          $box.offset({top:positionX});
        });
      });
    </script>
  </body>
</html>