JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" >
    <button id="div2" > click and drag </button>
</div>

CSS

#div1 {
    width: 1000px;
    height: 1000px;
    border: 2px solid black;
    }
#div2 {
    width: 100px;
    height: 25px;
    border: 1px solid black;
    position:absolute;
    top: 10px;
    left: 10px;
}

JavaScript

var x=10;
var y=10;
var t=1;
var x1,y1,l,r;

document.getElementById("div2").addEventListener("mousedown", down);
function down(){
    t=1;
    document.getElementById("div1").addEventListener("mouseup", place);
    
    document.getElementById("div1").addEventListener("mousemove",  myFunction);
}
function place(){ 
    document.getElementById("div1").removeEventListener("mousemove",  myFunction);
}  
function placeobj(x,y,x1,y1,l,r){
    var cpx = parseInt(x);
    var cpy = parseInt(y);
    var amtx=parseInt(x1);
    var amty=parseInt(y1);
    var of=10;
    document.getElementById("div2").style.left=cpx-amtx+l+"px";
    document.getElementById("div2").style.top=cpy-amty+r+"px";
}
function myFunction(e) {
    if(t==1){
        x1 = e.clientX;
        y1 = e.clientY;
        var el=document.getElementById('div2');
        l=el.offsetLeft;
        r=el.offsetTop;
        t=10;
    }
        x = e.clientX;
        y = e.clientY;
    placeobj(x,y,x1,y1,l,r);
}