Drag and Drop Simulation Function that works with Notion Calendar View

dnd.ts

// This took me forever to get right, but basically it just plays around with mouse events to simulate a drag and drop in Notion Calendars

function dragAndDrop(initial: HTMLElement, target: HTMLElement) {
  const pickUpEvent = new MouseEvent("mousedown", {
    // button: 1,
    bubbles: true,
    // clientX: initial.getBoundingClientRect().x,
    // clientY: initial.getBoundingClientRect().y,
  });

  const moveEvent = new MouseEvent("mousemove", {
    // relatedTarget: target,
    bubbles: true,
    clientX: target.getBoundingClientRect().x + 10,
    clientY: target.getBoundingClientRect().y + 10,
    movementX:
      target.getBoundingClientRect().x - initial.getBoundingClientRect().x + 10,
    movementY:
      target.getBoundingClientRect().y - initial.getBoundingClientRect().y + 10,
    // @ts-expect-error
    offsetX: 0,
    offsetY: 0,
  });

  const mouseEnterEvent = new MouseEvent("mouseenter", {
    bubbles: true,
    clientX: target.getBoundingClientRect().x + 10,
    clientY: target.getBoundingClientRect().y + 10,
  });

  const dropEvent = new MouseEvent("mousedown", {
    // button: 1,
    bubbles: true,
    clientX: target.getBoundingClientRect().x + 10,
    clientY: target.getBoundingClientRect().y + 10,
  });

  const dropEvent2 = new MouseEvent("mouseup", {
    // button: 1,
    bubbles: true,
    clientX: target.getBoundingClientRect().x + 10,
    clientY: target.getBoundingClientRect().y + 10,
  });

  initial.dispatchEvent(pickUpEvent);

  initial.dispatchEvent(moveEvent);
  target.dispatchEvent(mouseEnterEvent);
  const dropEvent3 = new MouseEvent("click", {
    bubbles: true,
    clientX: target.getBoundingClientRect().x + 10,
    clientY: target.getBoundingClientRect().y + 10,
  });
  target.dispatchEvent(dropEvent);
  target.dispatchEvent(dropEvent3);
  target.dispatchEvent(dropEvent2);
}