A super simple script to create draggable HTML elements

drag.ts

export const drag = (elements: NodeListOf<HTMLElement>) => {
  let z = 0;

  if (elements) {
    for (const element of elements) {
      let [adjustedX, adjustedY, currentX, currentY] = [0, 0, 0, 0];
      let moved = false;

      const dragMouseUp = (event: MouseEvent) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };

      const dragMouseMove = (event: MouseEvent) => {
        moved = true;

        adjustedX = currentX - event.clientX;
        adjustedY = currentY - event.clientY;

        element.style.top = `${element.offsetTop - adjustedY}px`;
        element.style.left = `${element.offsetLeft - adjustedX}px`;

        currentX = event.clientX;
        currentY = event.clientY;
      };

      const dragMouseDown = (event: MouseEvent) => {
        currentX = event.clientX;
        currentY = event.clientY;

        element.draggable = false;
        element.style.zIndex = `${z++}`;

        document.onmousemove = dragMouseMove;
        document.onmouseup = dragMouseUp;
      };

      element.onclick = (event: MouseEvent) => {
        if (moved) event.preventDefault();
        moved = false;
      }

      element.onmousedown = dragMouseDown;
    }
  }
}