UI workflow
Scenario
Draggable Kanban
Real native HTML5 drag-and-drop between and within columns, with order persisted to a server-backed API — combines the Drag & Drop drill's flaky-event lesson with genuine, verifiable state.
How this works
- · Real native HTML5 drag-and-drop events (dragstart/dragover/drop), not a library — the same flaky-event lessons as the standalone Drag & Drop drill, but with state you can actually verify afterward.
- · Card order is persisted to a session-cookie-backed API after every drop; position is kept dense (0..n-1) within each column, so reordering inside a column re-numbers correctly rather than leaving gaps.
- · Reloading the page reflects the last-saved order exactly, since the board renders from that same cookie state on every load.
What you'll practice
- Real native HTML5 drag-and-drop (dragstart/dragover/drop), the same flaky-to-automate mechanics as the Drag & Drop drill — but here the result is persisted, not just visual
- Dropping a card between two existing cards, not just at the top or bottom of a column
- Moving a card between columns and confirming both the old and new column's order are correct afterward
- A separate dataset from the API-Seeded Task Board scenario, even though both are "task" concepts — seeding one never affects the other
- 1 Board