Drag and Drop Libraries for React: Architecture and Implementation Compared

Implementing drag and drop in React involves balancing user experience, performance, and code maintainability. The five libraries reviewed here — react-beautiful-dnd, react-dnd, react-draggable, react-sortable-hoc, and sortablejs — take different approaches to solving this problem. Some focus on lists, others on free positioning, and some on raw DOM control. Let's compare how they handle setup, element definition, and state management.

🏗️ Setup and Configuration: Providers vs Direct Initialization

react-dnd requires a top-level provider to inject drag and drop context into your component tree.

• You must wrap your app with DndProvider and select a backend (like HTML5).
• This allows deep customization but adds initial boilerplate.

// react-dnd: Top-level provider
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      <MyComponent />
    </DndProvider>
  );
}

react-beautiful-dnd also uses a context provider but is more opinionated about structure.

• Wrap your list with DragDropContext.
• It manages accessibility and keyboard support automatically.

// react-beautiful-dnd: Context wrapper
import { DragDropContext } from 'react-beautiful-dnd';

function App() {
  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <MyList />
    </DragDropContext>
  );
}

react-sortable-hoc does not use a provider; it wraps specific components instead.

• You apply a Higher-Order Component to the list container.
• Less global setup, but ties logic closely to the component definition.

// react-sortable-hoc: HOC wrapper
import { sortableContainer } from 'react-sortable-hoc';

const SortableList = sortableContainer(({ children }) => <ul>{children}</ul>);

function App() {
  return <SortableList items={items} />
}

react-draggable requires no provider or global context.

• You simply wrap the element you want to be draggable.
• Ideal for isolated interactions without app-wide state.

// react-draggable: No provider needed
import Draggable from 'react-draggable';

function App() {
  return <Draggable><div className="box">Drag me</div></Draggable>;
}

sortablejs is vanilla JavaScript and initializes directly on DOM nodes.

• You use a ref to access the element and create a new instance.
• No React context is involved, which reduces overhead but increases manual wiring.

// sortablejs: Direct DOM initialization
import Sortable from 'sortablejs';

function MyList() {
  const ref = useRef(null);
  useEffect(() => {
    new Sortable(ref.current, { animation: 150 });
  }, []);
  return <ul ref={ref}>...</ul>;
}

🧩 Defining Draggable Elements: Components vs Refs

react-dnd uses hooks to declare drag sources and drop targets within components.

• useDrag defines what is being dragged.
• useDrop defines where it can be dropped.
• Gives you full control over the drag preview and cursor.

// react-dnd: Hooks for drag and drop
function Box() {
  const [{ isDragging }, drag] = useDrag(() => ({ type: 'BOX', collect: (m) => ({ isDragging: m.isDragging() }) }));
  return <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>Box</div>;
}

react-beautiful-dnd uses a specific component structure for every item.

• Each item must be wrapped in <Draggable>.
• You must pass provided props to connect the DOM node.

// react-beautiful-dnd: Draggable component
function Item({ item, index }) {
  return (
    <Draggable draggableId={item.id} index={index}>
      {(provided) => (
        <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
          {item.content}
        </div>
      )}
    </Draggable>
  );
}

react-sortable-hoc wraps items in a Higher-Order Component.

• Use SortableElement to make items sortable.
• Use SortableHandle if you want a specific drag handle.

// react-sortable-hoc: Sortable Element
const SortableItem = sortableElement(({ value }) => <li>{value}</li>);

function MyList({ items }) {
  return (
    <ul>{items.map((value, index) => (
      <SortableItem key={`item-${value}`} index={index} value={value} />
    ))}</ul>
  );
}

react-draggable wraps the single element directly.

• No special props needed inside the child.
• You can restrict axes or bounds easily.

// react-draggable: Simple wrapper
function Widget() {
  return (
    <Draggable axis="x" bounds="parent">
      <div className="widget">Widget</div>
    </Draggable>
  );
}

sortablejs relies on CSS selectors or refs to identify items.

• You configure the selector option to identify draggable nodes.
• React renders the list, sortablejs attaches events to the children.

// sortablejs: Selector configuration
new Sortable(ref.current, {
  animation: 150,
  draggable: '.draggable-item' // CSS selector for items
});

// Render
<ul ref={ref}>
  {items.map(item => <li key={item.id} className="draggable-item">{item.name}</li>)}
</ul>

🔄 Handling State and Reordering: Internal vs External

react-dnd does not manage list state for you.

• You must write the onDrop logic to update your state.
• This offers flexibility but requires more code for simple lists.

// react-dnd: Manual state update
function Board() {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: 'BOX',
    drop: (item) => moveItem(item.id),
    collect: (m) => ({ isOver: m.isOver() })
  }));
  return <div ref={drop}>Drop Zone</div>;
}

react-beautiful-dnd provides a structured onDragEnd event.

• You receive source and destination indices.
• You must update state manually, but the data shape is consistent.

// react-beautiful-dnd: onDragEnd handler
function onDragEnd(result) {
  if (!result.destination) return;
  const items = reorder(list, result.source.index, result.destination.index);
  setList(items);
}

react-sortable-hoc calls an onSortEnd callback with old and new indices.

• Similar to react-beautiful-dnd but tied to the HOC lifecycle.
• You still need to update your own state array.

// react-sortable-hoc: onSortEnd callback
function onSortEnd({ oldIndex, newIndex }) {
  setItems(arrayMove(items, oldIndex, newIndex));
}

react-draggable focuses on position, not list order.

• It provides onStop with x/y coordinates.
• You save position data rather than array indices.

// react-draggable: Position handling
function onDragStop(e, data) {
  console.log(`X: ${data.x}, Y: ${data.y}`);
  savePosition(data.x, data.y);
}

sortablejs can update the DOM directly, which risks conflicting with React.

• Best practice is to disable internal sorting and use callbacks to update React state.
• Use onChange or onEnd to trigger React re-renders.

// sortablejs: Syncing with React state
new Sortable(ref.current, {
  onEnd: (evt) => {
    const { oldIndex, newIndex } = evt;
    setItems(arrayMove(items, oldIndex, newIndex));
  }
});

⚠️ Maintenance and Ecosystem Status

react-beautiful-dnd is officially in maintenance mode by Atlassian.

• No new features are planned, only critical bug fixes.
• The community fork @hello-pangea/dnd is recommended for active development.

react-dnd remains actively maintained and widely used.

• It adapts well to new React versions and patterns.
• Best choice for long-term, complex projects.

react-draggable is stable and maintained for its specific use case.

• It is not expanding scope, which keeps it reliable.
• Safe to use for draggable windows or icons.

react-sortable-hoc uses an older React pattern (HOCs).

• Development has slowed significantly.
• New projects should prefer hook-based alternatives.

sortablejs is a standalone library with a long history.

• It is very stable and independent of React releases.
• Great for performance-critical lists where React overhead is a concern.

🤝 Similarities: Shared Ground Between Libraries

While the implementations differ, these libraries share common goals and patterns.

1. 🖱️ Mouse and Touch Support

• All libraries support mouse interactions by default.
• Most support touch, though react-dnd requires a specific touch backend.

// react-dnd: Touch backend
import { TouchBackend } from 'react-dnd-touch-backend';
<DndProvider backend={TouchBackend}>

// sortablejs: Native touch support
new Sortable(el, { fallbackOnBody: true });

2. 🎨 Custom Drag Previews

• You can customize what the user sees while dragging.
• react-dnd and react-beautiful-dnd offer strong APIs for this.

// react-dnd: Custom preview
useDrag(() => ({
  item: { type: 'BOX' },
  collect: (monitor) => ({ isDragging: monitor.isDragging() })
}));

// react-beautiful-dnd: Custom preview via children
<Draggable>{(provided) => (<div ref={provided.innerRef}>{/* Custom UI */}</div>)}</Draggable>

3. 📋 List Reordering Logic

• Most provide indices to calculate new order.
• You typically use a helper like array-move to update state.

// Common pattern across RBD, RSH, SortableJS
const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);
  return result;
};

4. ✅ Accessibility Considerations

• Keyboard support varies significantly between libraries.
• react-beautiful-dnd leads in this area out of the box.

// react-beautiful-dnd: Keyboard support built-in
// Users can press space to pick up, arrows to move, space to drop

// react-dnd: Requires custom implementation for keyboard
// No default keyboard support in HTML5 backend

📊 Summary: Key Differences

💡 The Big Picture

react-dnd is the power tool 🔨 — choose it for complex applications where drag and drop is core to the user experience. It handles edge cases and custom designs better than any other option.

react-beautiful-dnd (or its fork @hello-pangea/dnd) is the standard for lists 📋 — if you need a polished, accessible list view quickly, this is the path of least resistance. Just be aware of the maintenance status.

react-draggable is the specialist 🎯 — use it for draggable windows, icons, or map markers. Do not try to force it into list reordering.

react-sortable-hoc is the legacy choice 🕰️ — only use if maintaining older code. New projects should avoid the HOC pattern.

sortablejs is the performance engine 🏎️ — ideal for very long lists or when you need to share logic between React and non-React views. Requires careful state synchronization.

Final Thought: For most new React projects requiring list sorting, start with @hello-pangea/dnd (the fork of react-beautiful-dnd) for simplicity, or react-dnd if you anticipate complex requirements. Avoid mixing DOM manipulation libraries like sortablejs unless you have a specific performance need.