Documentation / Drag and drop
Sortable list
STEP 03 / LIVE EXAMPLE
Sortable list
A sortable list uses the shared pointer lifecycle but chooses its own target geometry and semantic event. Drag above or below an item to insert at that position. Up/down arrows or j/k navigate focused items; Home/End jump to the first or last item. Alt + up/down stages a reorder; release Alt to commit or press Escape to cancel.
LIVE / SORTABLE
drag onto an item
Sortable list shortcuts
Focus an item first.
- ↑ ↓ / j k
- Focus previous or next item
- Home / End
- Focus first or last item
- Alt + ↑ ↓ / j k
- Stage a reorder
- Release Alt / Esc
- Commit / cancel the move
First item
Second item
Third item
<rocket-sortable-list>
<div data-sortable-item="list-a" tabindex="0">First item</div>
<div data-sortable-item="list-b" tabindex="0">Second item</div>
</rocket-sortable-list>
rocket-sortable-move → { itemId, before }