JSFiddle - React, Tailwind, and code Playground

HTML

<div id=container>
    <div id=tcontainer>
        <div id=move>
    </div>
</div>

CSS

#container{
    position:absolute;
    left:50px;top:50px;
    width:500px;height:500px;
    background-color:red;
}
#tcontainer{
    position:relative;
    left:50px;top:50px;
    width:400px;height:400px;
    background-color:green;
}
#move {
    position:relative;
    left:20px;
    top:20px;
    height:150px;
    width:150px;
    background-color:lightgray;
}

JavaScript

obj = {startPositionX:0,startPositionY:0};
$('#move').on("mousedown",function(){
    var move = $(this);
    obj.startPositionX=event.offsetX+$('#tcontainer').offset().left;
    obj.startPositionY=event.offsetY+$('#tcontainer').offset().top;
    $(document).on("mousemove",function(e){
        console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
        move.css('transform','translate('+(e.pageX-obj.startPositionX)+'px, '+(e.pageY-obj.startPositionY)+'px)');
    });
});
$(document).on("mouseup",function(){
    $(this).off("mousemove");
});