# Build a Drag-and-Drop Kanban Board: HTML5 DnD vs JS Libraries

Source: https://www.techinterview.org/post/3233475140/build-drag-drop-kanban-board-frontend/
Updated: 2026-06-30 · techinterview.org

"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.