JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable">
</div>

CSS

#draggable { 
    width: 100px;
    height: 100px;
    padding: 0.5em;
    position:absolute;
    margin: 0 10px 10px 0;
    background-color: red;
    border: 2px solid gray;
    top:10px;
    left:10px;
}

document,html,body{
 width:100%;
  height:100%;  
}

JavaScript

$(function() {
    var dragging = false;
    var dragger, offsetX, offsetY;

    $("#draggable").mousedown(function(e) {
        dragging = true;
        dragger = this;
        offsetX=e.offsetX;
        offsetY=e.offsetY;
    });

    $("body").mouseup(function(e) {
        dragging = false;
    }).mousemove(function(e) {
        if (dragging) {
            $(dragger).stop().animate({left:e.pageX-offsetX, top:e.pageY-offsetY},300);
            console.log(e.pageX+" "+e.pageY);
        }
    });
});