HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
</head>
<body>
<div id="a"></div>
</body>
</html>
CSS
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#a {
width:100px;
background: red;
height:100px;
position: absolute;
}
JS
let dragging = false;
a.addEventListener("mousedown", (e)=>{
let x = e.clientX - a.offsetLeft;
let y = e.clientY - a.offsetTop;
dragging = true;
document.addEventListener("mousemove", (e)=>{
if(dragging === false){
return
}
a.style.left = e.clientX - x + 'px';
a.style.top = e.clientY - y + 'px';
})
})
document.addEventListener("mouseup", ()=>{
dragging = false;
})