<div>DRAG ME</div>
div {
width: 100px;
height: 100px;
position: fixed;
border: 2px solid;
line-height: 100px;
text-align: center;
user-select: none;
cursor: move;
}
View Compiled
const el = document.querySelector('div');
el.addEventListener('mousedown', e => {
if (e.buttons !== 1) return;
const { offsetX, offsetY } = e;
const controller = new AbortController();
window.addEventListener('mousemove', e => {
if (e.buttons !== 1) return;
el.style.left = e.pageX - offsetX + 'px';
el.style.top = e.pageY - offsetY + 'px';
}, { signal: controller.signal });
window.addEventListener('mouseup', e => {
if (e.buttons & 1) return;
controller.abort();
}, { signal: abortController.signal });
});
This Pen doesn't use any external CSS resources.