JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="box">
    <span></span>
  </div>
</body>

SCSS

html,body {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  cursor: none;
}

.box {
  position: absolute;
  box-shadow: inset 0 0 0 2px #666;
  min-width: 20px;
  min-height: 20px;
  border-radius: 10px;
}

.box span {
  display: block;
  background-color: #888;
  width: 20px;
  height: 20px;
  border-radius: 1000px;
}

.box span.notActive {
  width: 20px !important;
  height: 20px !important;
  transition: all 0.3s ease;
  padding: 0;
}

.box span.active {
  /*background-color: transparent;*/
}

JavaScript

$(document).ready(function() {
  var startX, startY, width, height, distance;
  $('body').on('touchstart mousedown', function(e) {
    var swipe = e.originalEvent;
    // console.log(swipe);
    startX = swipe.pageX; startY = swipe.pageY;
    // console.log('start position: '+startX + ' — ' + startY);
    $('.box span').removeClass('notActive').addClass('active');
    $('.box').css({
    'width': 0,
    'height': 0,
    'top': startX,
    'left' : startY
    });
    $(this).on('touchmove mousemove', function(e) {
      var currentPosition = e.originalEvent;
      var currentX = currentPosition.pageX;
      var currentY = currentPosition.pageY;
      width = currentX - startX;
      height = currentY - startY;
      distance = Math.abs(width);
      $('.box span').css({
        'padding-left': distance
      });
      // if (width > 60) {
      //   var left = width - 60;
      //   $('.box').css('left', left);
      //   width = 60;
      // }
      boxSize(width,height);
      // console.log('moving to: ' + currentX + ' — ' + currentY);
    }).one('touchend touchcancel mouseup', function(e) {
      $('.box span').removeClass('active').addClass('notActive').attr('style', '');
      $(this).unbind('mousemove');
    });
  });

  $('body').on('mousemove', function(e) {
    // console.log('asdf');
    // $(this).bind('mousemove');
    var currentPosition = e.originalEvent;
    var currentX = currentPosition.pageX - 15;
    var currentY = currentPosition.pageY - 15;
    $('.box').css({
      'top': currentY,
      'left' : currentX
    });
  });
});

function boxPosition(){

}

function boxSize(width,height) {
  // if (width>height) { 
  //   height = 0;
  // } 
  // else {width = 0;}
  
  // $('.box').css({
  //   'width': width,
  //   'height': height
  // });
}