JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<div id="circle">
  <div class="circle_info">A</div>
</div>

CSS

#circle {
  border-radius: 100%;
  width: 50px;
  height: 50px;
  border: 2px solid red;
  position: relative;
  cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

#trackbar.custom_cursor.grabbing {
  cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

.circle_info {
  position: absolute;
  top: 15px;
  left: 18px;
}

JavaScript

var mouse_status_down = false;
$(document).ready(function(){
  $('#circle').bind('mousedown', function(e) {
    mouse_status_down = true;
    var elem = $('#circle > div').css({
      'cursor': 'url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;',
      'position': 'absolute'
    });
    setTimeout(function(){followMouse(elem, e);}, 1000);
  });
  
  function followMouse(elem, event) {
    $(elem).css({
      'left': e.pageX,
      'top': e.pageY
    });
    if(mouse_status_down)
    {
      setTimeout(function(){followMouse(elem, event);}, 1000);
    }
  }
  
});