React drag & drop

Drag and drop with a tree that actually knows where the drop lands.

fc-react-dnd is a React drag-and-drop library with first-class tree support. Every example below runs live, and the exact source that powers it is shown right underneath.

$npm install fc-react-dnd

See it vs dnd-kit →

First-class trees

Nest, un-nest, and reorder in one gesture. The library returns a resolved drop position — parent, index, depth — not just "you are above this row".

Only the rows that move re-render

Drag state lives in a store outside React. A 24-row list re-renders 4 rows per drag, where dnd-kit re-renders all 24.

Keyboard and pointer, one path

Arrow keys produce a translate exactly as the pointer does, so every legal drop — including "make this the first child" — is reachable by keyboard alone.

Zero runtime dependencies

ESM-only, React 19+, sideEffects: false. The maths modules carry no "use client" and run in a server component.

Try it

Drag a row. The one you hold follows your pointer; the rows it passes settle into place. Its full source is on the Sortable page.

To pick up a draggable item, press Space or Enter. While dragging, use the arrow keys to move the item. Press Space or Enter again to drop, or press Escape to cancel.

The demos

Sortable list →The two-primitive base case, with the object-state pattern.Tree →Drop-into vs drop-between, depth from horizontal position, cycles made unrepresentable.vs dnd-kit →The same list twice, with a live per-row re-render counter.