Draggable Sortable
Use DraggableSortable with DraggableSortableItem to add pointer, touch, and keyboard reordering to custom Admin Panel interfaces.
Import
Basic usage
DraggableSortable coordinates the list and reports the original and destination indexes through onDragEnd. Your component remains responsible for updating local state and persisting the new order when necessary.
Each DraggableSortableItem exposes the attributes, listeners, ref, transform, and transition needed to render an item. Apply the listeners to a visible drag handle so the rest of the row can retain its own interactions.
DraggableSortable props
Prop | Type | Description |
|---|---|---|
| | Renders the sortable items. |
| | Lists item IDs in their current display order. |
| | Handles a completed reorder. |
| | Handles the beginning of a drag. |
| | Adds a class to the sortable list container. |
DraggableSortableItem props
Prop | Type | Description |
|---|---|---|
| | Matches an entry in the parent |
| | Renders the item with its drag attributes and visual state. |
| | Prevents the item from being reordered. |
* An asterisk denotes that a prop is required.
Accessibility
- Put the supplied attributes and listeners on a keyboard-focusable drag handle.
- Give the handle an accessible name that identifies the item it moves.
- Persist the resulting order only after
onDragEndsupplies a valid destination.
These components configure their own drag-and-drop context and require no Payload providers.
Was this page helpful?