Build a Kanban board with drag and drop

Question

Accepted Answer

## Building a Kanban Board (drag & drop) in React **Mental model:** Cards live in a flat list, each tagged with a `col`. Columns are derived by filtering. Drag-and-drop uses the native HTML5 API: `dragstart` stashes the card id in `dataTransfer`; a column's `dragover` (with `preventDefault`) marks it a drop target; `drop` reassigns that card's `col`. No library needed. ### Step 1 — Flat cards + derived columns ```jsx const [cards, setCards] = useState(initial); const inCol = (col) => cards.filter((c) => c.col === col); ``` ### Step 2 — Start the drag ```jsx const onDragStart = (e, id) => e.dataTransfer.setData('text/plain', id); ``` ### Step 3 — Allow drop + handle it `dragover` must `preventDefault` or `drop` never fires. ```jsx const onDrop = (e, col) => { const id = e.dataTransfer.getData('text/plain'); setCards((cs) => cs.map((c) => (c.id === id ? { ...c, col } : c))); };

e.preventDefault()} onDrop={(e) => onDrop(e, col)} /> ``` ### Step 4 — Dragga

Build a Kanban board with drag and drop

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)