The classic drag: on mousedown record the offset and start listening for mousemove (on the document, so it works past the element's edge); update style.left/top as the pointer moves; on mouseup stop listening. The native HTML Drag-and-Drop API and Pointer Events now cover this, but the manual pattern still appears in custom controls.
<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;padding:20px"><div id="d" style="width:60px;height:60px;background:#b388ff;position:absolute"></div>
<script>const d=document.getElementById('d');let ox,oy,drag=false;d.onmousedown=e=>{drag=true;ox=e.offsetX;oy=e.offsetY;};document.onmousemove=e=>{if(drag){d.style.left=(e.pageX-ox)+'px';d.style.top=(e.pageY-oy)+'px';}};document.onmouseup=()=>drag=false;</script></body></html>