#431
Board
A three-column board: cards reorder inside a column and move between columns by mouse, touch or keyboard.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Board" pattern (@codeatlasdev/ui demo #431, foundation/drag-and-drop) in my app.
Call get_demo({ ids: ["#431"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Kanban boards, status pipelines and any set of lists whose items move from one to another.
Keep these library parts, with the props and tokens the demo uses:
- applyMove, DndLayer, useDnd, DndDropEvent from "@codeatlasdev/ui"
Behaviour to keep:
- Every column is `{@attach dnd.sortable(() => ({ id: col, group: 'board',`; lists with the same `group` accept each other's cards
- `onDrop` receives the moved id with its `from` and `to` positions and applies it with `applyMove(lists, e, (c) => c.id)`
- Keyboard: Space lifts the card, ArrowUp and ArrowDown move it inside the column, ArrowLeft and ArrowRight jump to the next column, Enter drops, Escape cancels
- Each card is `<li data-dnd-item={card.id}` with a focusable `button`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- DndLayer
@codeatlasdev/ui
How it is built
- Every column is `{@attach dnd.sortable(() => ({ id: col, group: 'board',`; lists with the same `group` accept each other's cards
- `onDrop` receives the moved id with its `from` and `to` positions and applies it with `applyMove(lists, e, (c) => c.id)`
- Keyboard: Space lifts the card, ArrowUp and ArrowDown move it inside the column, ArrowLeft and ArrowRight jump to the next column, Enter drops, Escape cancels
- Each card is `<li data-dnd-item={card.id}` with a focusable `button`
Related
Loading source.