<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;
}

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 });
});