drag.ts

function dragFrom(
  el: Element,
  callbacks: {
    start?: (x: number, y: number) => void;
    move?: (x: number, y: number) => void;
    end?: (x: number, y: number) => void;
  }
): () => void {
  function handleMove(e: MouseEvent) {
    callbacks.move && callbacks.move(e.clientX, e.clientY);
  }
  function handleUp(e: MouseEvent) {
    unlisten();
    callbacks.end && callbacks.end(e.clientX, e.clientY);
  }
  function unlisten() {
    window.removeEventListener("mousemove", handleMove);
    window.removeEventListener("mouseup", handleUp);
  }
  function handle(e: MouseEvent) {
    callbacks.start && callbacks.start(e.clientX, e.clientY);
    window.addEventListener("mousemove", handleMove);
    window.addEventListener("mouseup", handleUp);
  }
  el.addEventListener("mousedown", handle);
  return function() {
    unlisten();
    el.removeEventListener("mousedown", handle);
  };
}