Skip to main content

Search

Search problems, hooks, and pages

Drag & Drop Kanban Board

Build a 3-column Kanban board (Todo → In Progress → Done) where task cards can be dragged from one column and dropped into another. No external drag-and-drop library.

Requirements

  • 3 columns: Todo, In Progress, Done
  • Each column has a list of draggable task cards
  • Drag a card from any column and drop it into any other column
  • The card moves from the source column to the target column
  • Visual feedback: highlight the drop target column on drag-over
  • No external DnD library — use only the HTML5 Drag and Drop API

Key Patterns

draggable attributeonDragStart → dataTransfer.setDataonDragOver → e.preventDefault()onDrop → dataTransfer.getDataImmutable state updatedragRef (useRef) vs dataTransfer

Important

Interview Tip

onDragOver must call e.preventDefault() — without it, the browser will not fire onDrop. Store the dragged card's ID + source column in a useRef (not state!) so you don't trigger re-renders during drag. Only update state on drop.
📋 Todo3
Design the landing page
high
Write unit tests
medium
Update dependencies
low
⚙️ In Progress2
Build auth flow
high
Fix pagination bug
medium
✅ Done2
Set up CI/CD
low
Code review PR #42
medium