#Events

On release, (dragEnd) fires first, then (drop) on the destination, both before the next render.

#DragStartEvent

interface DragStartEvent {
  draggableId: string;
  droppableId: string; // the list the drag started in
  data?: unknown; // vdndDraggableData
  position: CursorPosition;
  sourceIndex: number;
}

#DropEvent

interface DropEvent {
  source: DropSource;
  destination: DropDestination;
}

interface DropSource {
  draggableId: string;
  droppableId: string;
  index: number;
  data?: unknown; // vdndDraggableData
}

interface DropDestination {
  droppableId: string;
  placeholderId: string; // deprecated: always END_OF_LIST; use index for the position
  index: number; // final insertion index, after removal from the source
  data?: unknown; // vdndDroppableData / droppableData
}

Apply the move with moveItem(), reorderItems() or applyMove().

#DragEndEvent

interface DragEndEvent {
  draggableId: string;
  droppableId: string; // the source list
  cancelled: boolean;
  data?: unknown;
  sourceIndex: number;
  destinationIndex: number | null;
}

destinationIndex is null when nothing was dropped. That happens when:

• the drag was cancelled, by any of:
  • Escape
  • Tab during a keyboard drag
  • the window losing focus during a pointer drag
  • the page being hidden during a pointer drag (the release would never reach the page)
  • the system cancelling a touch
  • the dragged draggable being destroyed (for example its item removed from the list mid-drag)
• the item was released outside every droppable
• the item was released over a disabled droppable

A non-null value means a drop event fired on the destination. cancelled is true only in the first case, so check destinationIndex === null to detect "no drop".

#PlaceholderMoveEvent

Added in 3.2.0.

interface PlaceholderMoveEvent {
  draggableId: string;
  sourceDroppableId: string; // the list the drag started in
  droppableId: string; // the list the placeholder moved within
  previousIndex: number | null; // null when the placeholder just entered this list
  currentIndex: number;
  data?: unknown; // vdndDraggableData
}

Emitted each time the placeholder moves within a list, including when it enters the list. It is not emitted for the initial pick-up or when the placeholder leaves. Indexes follow the DropEvent.destination.index convention: where the item would land if dropped now. For the first move in the source list, previousIndex is the item's original index.

Each event reports one placeholder update. During a fast pointer drag the placeholder can skip rows between updates, so currentIndex may differ from previousIndex by more than one.

Listening runs change detection: like any Angular template listener, (placeholderMove) marks your component and its ancestors for check each time it fires. A list without the listener does not re-render your component on placeholder moves.

Typical uses are haptic feedback and screen reader announcements.