Mouse drag and drop for Elm ports

windowMouseDrags.js

const sendWindowMouseDrags = port => {
  let mouseDown = false;
  let mousePosition = { x: null, y: null };

  const getPoint = e => ({ x: e.pageX, y: e.pageY });

  document.addEventListener('mousedown', e => {
    mousePosition = getPoint(e);
    mouseDown = true;
    port.send([mousePosition, null]);
  });

  document.addEventListener('mouseup', e => {
    mousePosition = getPoint(e);
    mouseDown = false;
    port.send([null, mousePosition]);
  });

  document.addEventListener('mousemove', e => {
    const newPosition = getPoint(e);
    if (mousePosition.x && mousePosition.y && mouseDown) {
      port.send([mousePosition, newPosition]);
    }
    mousePosition = newPosition;
  });
};