I Built a Drag-and-Drop Kanban Board With Zero Libraries

Trello, Linear, Jira — they all have the same draggable board. You can build it with zero libraries using the browser's native HTML5 Drag and Drop API. Here's a live Kanban with cards you drag between columns.

🗂️ Try it (drag the cards): https://dev48v.infy.uk/design/day15-kanban-board.html

The native DnD lifecycle

1. Mark a card draggable="true".
2. On dragstart, stash the card's id in dataTransfer.
3. On the column's dragover, call preventDefault() — this is the #1 gotcha: without it, the element is not a valid drop target and nothing happens.
4. On drop, read the id, move the DOM node into that column, and update your model.

State vs DOM

Move the node for instant feedback, but keep a small data model (which card is in which column) as the source of truth — then re-render counts from it and persist to localStorage. Don't let the DOM be your database.

The caveats

Native DnD has no touch support (mobile needs Pointer Events or a lib like dnd-kit) and weak accessibility — fine for learning the mechanics, reach for a library in production.

🔨 Full build (draggable → dragstart/dataTransfer → dragover preventDefault → drop → persist) on the page: https://dev48v.infy.uk/design/day15-kanban-board.html

Part of DesignFromZero. 🌐 https://dev48v.infy.uk