Documentation / Drag and drop
Kanban board
STEP 02 / LIVE EXAMPLE
Kanban board
Each lane carries a numeric data-col; cards carry stable IDs. Drag a card into another lane, or focus a card and press Alt+→. The emitted event describes the target lane and the card to insert before; it does not perform a mutation. Plain arrows navigate focus; use Alt+h/j/k/l to stage keyboard moves, then release Alt to commit.
LIVE / KANBAN
drag or use Alt + arrows
Kanban shortcuts
Focus an item first.
- ↑ ↓ ← → / h j k l
- Focus cards within and between lanes
- Alt + ↑ ↓ ← → / h j k l
- Stage a card move
- Release Alt
- Commit the move
- Esc
- Cancel staging
Backlog
Doing
Done
<rocket-kanban-board>
<section data-kanban-lane data-col="0">
<div data-kanban-lane-cards>
<article data-kanban-card="card-a" tabindex="0">
<button data-kanban-card-main>Card title</button>
</article>
</div>
</section>
</rocket-kanban-board>
rocket-kanban-move → { cardId, col, before }