Function dragAndDrop

packages/@react-spectrum/s2/test/utils/dragAndDrop.ts:93–151

(
  source: Element,
  target: Element,
  options?: DragAndDropOptions
)

 * dispatching the full DragEvent lifecycle with synthetic events instead.
 */
export async function dragAndDrop(
  source: Element,
  target: Element,
  options?: DragAndDropOptions
): Promise<void> {
  if (server.browser !== 'chromium') {
    await userEvent.dragAndDrop(source, target, options);
    return;
  }

  let {dataTransfer, proxy} = createWritableDataTransfer();

  let sourcePos = resolveClientPosition(source, options?.sourcePosition);
  let targetPos = resolveClientPosition(target, options?.targetPosition);

  // Patch DragEvent.prototype.dataTransfer to return our proxy whenever the
  // event carries our real dataTransfer. This is the only reliable way to make
  // effectAllowed/dropEffect writable in Chromium for synthetic events.
  let origDesc = Object.getOwnPropertyDescriptor(DragEvent.prototype, 'dataTransfer')!;
  Object.defineProperty(DragEvent.prototype, 'dataTransfer', {
    get() {
      let real = origDesc.get!.call(this);
      return real === dataTransfer ? proxy : real;
    },
    configurable: true
  });

  try {
    // Dispatch dragstart so useDrag populates the DataTransfer with items and sets effectAllowed.
    source.dispatchEvent(
      new DragEvent('dragstart', {dataTransfer, bubbles: true, cancelable: true, ...sourcePos})
    );

    // Allow React state updates from the dragstart handler to flush.
    await new Promise(resolve => requestAnimationFrame(resolve));

    target.dispatchEvent(
      new DragEvent('dragenter', {dataTransfer, bubbles: true, cancelable: true, ...targetPos})
    );
    target.dispatchEvent(
      new DragEvent('dragover', {dataTransfer, bubbles: true, cancelable: true, ...targetPos})
    );

    // In a real browser drag, the drop event only fires when dropEffect is not 'none'.
    // useDrop sets dropEffect during dragenter/dragover based on getDropOperation.
    if (proxy.dropEffect !== 'none') {
      target.dispatchEvent(
        new DragEvent('drop', {dataTransfer, bubbles: true, cancelable: true, ...targetPos})
      );
    }

    source.dispatchEvent(
      new DragEvent('dragend', {dataTransfer, bubbles: true, cancelable: true, ...targetPos})
    );
  } finally {
    // Restore the original dataTransfer getter.
    Object.defineProperty(DragEvent.prototype, 'dataTransfer', origDesc);
  }