#432
Drop zones
Task chips dragged from a tray onto weekday drop zones, with a dashed highlight while a chip is over a day.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Drop zones" pattern (@codeatlasdev/ui demo #432, foundation/drag-and-drop) in my app.
Call get_demo({ ids: ["#432"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Scheduling, assigning and filing: any place a loose item is dropped onto a target that is not a sortable list.
Keep these library parts, with the props and tokens the demo uses:
- DndLayer, useDnd, DndDropEvent from "@codeatlasdev/ui"
Behaviour to keep:
- Each chip is `{@attach dnd.draggable(() => ({ id: t.id, label: t.title }))}` on an element with `data-dnd-item`
- Each day is `{@attach dnd.dropzone(() => ({ id: day, label: day, onDrop: (e) => drop(day, e) }))}`; the zone is outlined while a chip is over it
- Keyboard: Space lifts a chip, the arrows pick the day, Enter drops; the zone name is announced to screen readers
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
- Each chip is `{@attach dnd.draggable(() => ({ id: t.id, label: t.title }))}` on an element with `data-dnd-item`
- Each day is `{@attach dnd.dropzone(() => ({ id: day, label: day, onDrop: (e) => drop(day, e) }))}`; the zone is outlined while a chip is over it
- Keyboard: Space lifts a chip, the arrows pick the day, Enter drops; the zone name is announced to screen readers
Related
Loading source.