JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parts">
    <div class="part" style="top:20px; left: 10px;">click and drag</div>
</div>

CSS

.part {
    position: absolute;
    border: solid 10px #dea;
    background-color: rgba(255,255,255,.2);
    width: 100px;
    height: 100px;
}
.parts { background-color: #eee; width: 100%; height: 900px;}

JavaScript

$("document").ready(function(){
    $("body").on("mousedown touchstart", ".part", function(pos){
        pos.preventDefault();
        pos.stopPropagation();
        var downL = pos.clientX;
        var downT = pos.clientY;
        var $this = $(this);
        var startPos = $this.css(["top", "left"]);
        vOffset = downT -startPos["top"].replace(/[^-\d\.]/g, '');
        hOffset = downL - startPos["left"].replace(/[^-\d\.]/g, '');
    
        $this.on("mousemove.partmove touchmove", function(e){
            e.preventDefault();
            var moveL = e.clientX;
            var moveT = e.clientY;
            console.log("mov " + (moveT-vOffset) );
            $this.css({"left": moveL-hOffset, "top": moveT-vOffset});
        });
    
        $this.one("mouseup touchcancel", function(){
            $this.off(".partmove");
        });
    });
});