Element Adapter

The element adapter coordinates native browser drag events and turns them into typed lifecycle callbacks.

draggable

Registers an element as a drag source and returns an idempotent cleanup function.

draggable({ element, dragHandle, getData, getNativeData })

dropTargetForElements

Registers an element as a drop target for element drags.

dropTargetForElements({ element, canDrop, getData, getDropEffect })

monitorForElements

Listens to element drag lifecycle events after source and target callbacks.

monitorForElements({ canMonitor, onDragStart, onDrop })

Lifecycle callbacks

Use preview, start, target-change, drag, and drop callbacks for UI and state updates.

onGenerateDragPreview, onDragStart, onDropTargetChange, onDrag, onDrop

Event order

Section titled “Event order”

Events dispatch in this order:

  1. Drag source.
  2. Current drop targets from innermost to outermost.
  3. Monitors in creation order.