Events

Callbacks in the options object everywhere; additionally emitted as component events in Vue (@end) and as DOM CustomEvents on <dnd-list> (dnd-end).

Because the model updates live during the drag (that's what moves the items on screen), the granular events also fire live — not just on drop. onEnd is the "commit" signal.

Callback	Vue event	<dnd-list> event	Fires
onStart	start	dnd-start	The pointer crossed the threshold — drag is live.
onEnd	end	dnd-end	Drag finished (dropped, cancelled or spilled).
onMove	move	—	The dragged block moved to a new list/index.
onAdd	add	dnd-add	This list gained an item (cross-list or clone).
onRemove	remove	dnd-remove	This list lost an item.
onUpdate	update	dnd-update	An item was reordered within this list.
onChange	change	dnd-change	Union event — one of added/removed/moved.
onChoose	choose	dnd-choose	Pointer went down on an item.
onUnchoose	unchoose	dnd-unchoose	Pointer released (drag or not).
onSelectionChange	selection-change	dnd-select	Multi-drag selection changed.
onKeyboardMove	keyboard-move	dnd-keyboard	A keyboard reorder was committed.
onKeyboardStateChange	— (internal)	—	The keyboard-held index changed (number | null).

Payloads

interface DragStartEvent<T> {
  item: T
  index: number
  fromList: readonly T[]
  fromEl: HTMLElement
  originalEvent: PointerEvent
}

interface DragEndEvent<T> {
  item: T
  oldIndex: number
  newIndex: number            // -1 when cancelled/spilled
  fromList: readonly T[]
  toList: readonly T[]
  fromEl: HTMLElement
  toEl: HTMLElement
  pullMode: false | true | 'clone'
  cancelled: boolean
  originalEvent: PointerEvent | KeyboardEvent
}

interface DragMoveEvent<T> {
  item: T
  fromList: readonly T[]
  toList: readonly T[]
  fromEl: HTMLElement
  toEl: HTMLElement
  oldIndex: number
  newIndex: number
  willInsertAfter: boolean
  originalEvent: PointerEvent
}

interface AddEvent<T>    { item: T; newIndex: number }
interface RemoveEvent<T> { item: T; oldIndex: number }
interface UpdateEvent<T> { item: T; oldIndex: number; newIndex: number }

interface ChangePayload<T> {
  added?:   { item: T; newIndex: number }
  removed?: { item: T; oldIndex: number }
  moved?:   { item: T; oldIndex: number; newIndex: number }
}

interface ChooseEvent<T>          { item: T; index: number }
interface SelectionChangeEvent<T> { items: T[]; indices: number[] }
interface KeyboardMoveEvent<T>    { item: T; oldIndex: number; newIndex: number }

Patterns

Persist on drop only:

onEnd: ({ cancelled }) => {
  if (!cancelled) saveOrder(items)
}

Track cross-list transfers:

// On the receiving list:
onAdd: ({ item, newIndex }) => api.assign(item.id, laneId, newIndex)
// On the giving list:
onRemove: ({ item }) => api.unassign(item.id, laneId)

Escape / spill detection: onEnd fires with cancelled: true for Escape, pointercancel and revertOnSpill; removeOnSpill drops arrive with cancelled: false and toEl = the source container.