JSFiddle - React, Tailwind, and code Playground
HTML
<div class="item"></div>
CSS
.item{
background: #bbb;
height: 40px;
width: 40px;
position: absolute;
border-radius: 50%;
left: 0;
top: 0;
}
JavaScript
$(document).ready(function() {
var posX, posY, clicked = false;
function mueve (e) {
clicked = true;
posX = e.pageX - 20;
posY = e.pageY - 20;
$('.item').animate({left: posX, top: posY});
}
$(document).on('mousedown', mueve);
$(document).on('mouseup', function(e) {
clicked = false;
});
$(document).mousemove(function(e) {
if (clicked) {
$('.item').stop(true, true);
mueve(e);
}
});
});