JSFiddle - React, Tailwind, and code Playground
HTML
<div id="holder">
<div id="block"></div>
</div>
CSS
#holder{
height: 40px;
width: 40px;
padding: 30px;
cursor: pointer;
}
#block{
height: 40px;
width: 40px;
background-color: black;
cursor: move;
}
JavaScript
var drag = $('#holder');
drag.draggable({
start: function() {
$(document).mousemove(function (e) {
drag.offset({ top: e.pageY-50, left: e.pageX-50 });
}).click(function () {
$(this).unbind("mousemove");
});
}
});