Drag group
STEP 04 / LIVE EXAMPLE
Move between lists
A drag group coordinates several lists without assigning Kanban columns or card semantics. Move an item within a list or into another list, including the space after its last item. Each group is its own drag scope; the page decides how to apply the emitted move. Plain arrows move focus within and between lists. Focus an item and use Alt + arrows (or h/j/k/l), then release Alt to commit. Escape cancels the staged move.
Drag group shortcuts
Focus an item first.
- ↑ ↓ / k j
- Focus within a list
- ← → / h l
- Focus a neighboring list
- Home / End
- Focus first or last item in a list
- Alt + ↑ ↓ ← → / h j k l
- Stage a move or change lists
- Release Alt / Esc
- Commit / cancel the move
Inbox
Later
<rocket-drag-group>
<section data-drop-list="inbox">
<div data-drag-item="note-a" tabindex="0">Sketch a card</div>
</section>
<section data-drop-list="later"></section>
</rocket-drag-group>
rocket-drag-group-move → { itemId, fromList, toList, before }COMPOSITION / LIVE EXAMPLE
Nested Rockets
A sortable list sits inside an item of a drag group. Drag or use Alt + arrows on an inner item to reorder only that list; drag the outer item to move the whole group item. Each host emits its own event, and the page patches the matching example over SSE. Semantic events still bubble; when nesting two hosts of the same surface, the page should check the event target before invoking an outer action.
Nested hosts shortcuts
Focus an item first.
- Tab
- Focus an outer item or an inner list item
- Outer: ↑ ↓ ← → / h j k l
- Navigate items and regions
- Outer: Alt + ↑ ↓ ← → / h j k l
- Move the whole outer item
- Inner: ↑ ↓ / j k
- Navigate inside the sortable list
- Inner: Alt + ↑ ↓ / j k
- Reorder only the inner list
- Release Alt / Esc
- Commit / cancel the move