“Build a Kanban board with drag-and-drop” is a frequent frontend interview question because it tests gesture handling, accessibility, layout stability, and state synchronization — all in one component. The 2026 ecosystem has good options; the interview tests whether you know which one and why.
Functional requirements
- Multiple columns with cards
- Drag cards between columns
- Drag cards within a column to reorder
- Optional: drag entire columns to reorder
- Smooth animation
- Keyboard accessible
- Persists order to backend
The library question
HTML5 Drag and Drop API
Native, built-in. The original API. Pros: no dependencies. Cons: terrible UX (no smooth animations, mobile support is broken, accessibility is a nightmare).
Almost never the right choice for production.
react-dnd
Mature but heavy. Based on HTML5 DnD with abstractions. Showing its age.
dnd-kit
The modern default. Pros: lightweight, accessible, mobile-friendly, sortable presets. Cons: slightly more setup than higher-level alternatives.
Pragmatic Drag and Drop (Atlassian)
2024 release from Atlassian — focuses on small bundle, performance, accessibility. Used in Jira and Confluence rewrites. Strong choice for new projects.
For interview answers in 2026: dnd-kit or Pragmatic.
State architecture
Local state for the live drag (position, hover target, dragging element). Persistent state for the column / card layout.
On drop:
- Optimistically update local state
- Call API to persist new order
- If API fails, revert state and show error
Reordering algorithm
Two approaches:
- Index-based: each card has an integer index. Insert and re-number affected cards. Simple but every reorder writes O(n) records.
- Fractional indexing: each card has a fractional position. Insert with a new fraction between neighbors. O(1) writes per reorder. Used by Linear, Notion, Figma.
For interview, mention fractional indexing as the production-quality answer.
Animation
Smooth transitions when cards reorder make the UI feel polished. dnd-kit and Pragmatic both have built-in animations. Use them; don’t hand-roll.
Keyboard accessibility
Drag-and-drop is hostile to keyboard users by default. Modern libraries provide keyboard equivalents:
- Tab to focus a card
- Space or Enter to “pick up”
- Arrow keys to move
- Space or Enter again to drop
- Escape to cancel
Announce changes via aria-live.
Mobile / touch
HTML5 DnD has poor touch support. Modern libraries handle touch via PointerEvents — same gesture works on mobile.
Long-press to start drag (avoid accidental drags from scrolling).
Performance with many cards
For boards with hundreds of cards, virtualize columns. dnd-kit + react-window can compose, though it requires care to avoid drag handlers conflicting with virtualization.
Multi-user collaboration
If multiple users are editing the board simultaneously, conflicts arise. Solutions:
- Server is source of truth
- WebSocket pushes other users’ changes
- Last-write-wins per card position
- For finer collaboration (live cursors, presence), see frontend system design for collaborative cursors
Common mistakes
- Using HTML5 DnD without realizing how broken mobile support is
- No accessibility (keyboard, screen reader)
- Re-rendering all cards on every drag move (jank)
- Not persisting order; refresh resets the board
Frequently Asked Questions
Should I implement drag-and-drop from scratch?
For interview practice, yes — instructive. For production, no — use a library.
How do I handle a card being dragged off-screen?
Auto-scroll the container when the card is near the edge. Most libraries support this out of the box.
What if the user is using a screen reader?
Announce drag pickup, position changes, and drop via aria-live regions. Modern libraries handle the announcements.