Events

Updated on Mar 27, 2026

The Sortable emits events during drag-and-drop interactions. Use these events to track item movements, validate operations, or update external state. The events fall into three categories: drag events, data events, and navigation events.

The following example demonstrates how to listen to the Sortable events and log their properties to the console. Try dragging items within the list or between the two lists to see the events in action.

Change Theme

Theme

Loading ...

Drag Events

Drag events fire at each stage of the drag-and-drop lifecycle. Call preventDefault() on dragStart or dragOver to cancel the operation.

The following table lists all drag events and their properties:

Event	Type	Fires when	Preventable	Properties
dragStart	DragStartEvent	The user begins dragging an item.	Yes	index
dragOver	DragOverEvent	The dragged item moves over another item.	Yes	index, oldIndex
dragEnd	DragEndEvent	The user releases the dragged item.	No	index, oldIndex
dragLeave	void (no payload)	The dragged item leaves the Sortable bounds.	No	None

Data Events

Data events fire when an item changes position within or between Sortable components. The dataAdd and dataRemove events fire after dragEnd completes and are not preventable. All data events include a sender reference to the emitting Sortable instance.

The following table lists all data events and their properties:

Event	Type	Fires when	Preventable	Properties
dataMove	DataMoveEvent	An item moves to a new position in the same list.	Yes	dataItem, index, oldIndex, sender
dataAdd	DataAddEvent	An item is added from another Sortable.	No	dataItem, index, sender
dataRemove	DataRemoveEvent	An item is removed and transferred to another Sortable.	No	dataItem, index, sender

Navigation Events

The navigate event fires when the user moves items with the keyboard. Call preventDefault() to cancel keyboard navigation.

Event	Type	Fires when	Preventable	Properties
navigate	NavigateEvent	The user moves an item with the keyboard.	Yes	index, oldIndex, ctrlKey

Event Firing Order

When the user transfers an item between two Sortable components, the events fire in the following sequence:

1. dragStart—on the source Sortable.
2. dragOver—on the target Sortable (fires repeatedly as the item moves).
3. dragEnd—on the source Sortable.
4. dataAdd—on the target Sortable.
5. dataRemove—on the source Sortable.

Suggested Links

• Data Binding
• Sortable Items
• API Reference of the SortableComponent