Drag-and-Drop Libraries Compared: @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll, @shopify/draggable, and react-beautiful-dnd

Drag-and-drop (DnD) is a common UI pattern in modern web apps — from task boards to file uploads. Three libraries stand out in the React ecosystem: react-beautiful-dnd, its companion package @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll, and @shopify/draggable. But they’re not interchangeable. Let’s unpack their architecture, capabilities, and trade-offs.

⚠️ Critical Context: Deprecation Status

Before diving into features, note this: react-beautiful-dnd is officially deprecated. According to its npm page and GitHub repository, Atlassian recommends migrating to its newer library, @atlaskit/pragmatic-drag-and-drop. The autoscroll companion package exists only to backport one missing feature (autoscrolling) to the legacy react-beautiful-dnd API.

🛑 Do not use react-beautiful-dnd or its autoscroll wrapper in new projects. They receive no active feature development and exist only for backward compatibility.

With that out of the way, here’s how these packages compare technically.

🧱 Core Architecture: React-Centric vs DOM-Centric

react-beautiful-dnd (deprecated) is built exclusively for React. It uses React’s component model heavily, requiring specific wrappers like <DragDropContext>, <Droppable>, and <Draggable>.

// react-beautiful-dnd (deprecated)
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function TaskList({ tasks }) {
  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="tasks">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {tasks.map((task, index) => (
              <Draggable key={task.id} draggableId={task.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {task.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll is not a standalone DnD library. It’s a utility that adds autoscroll behavior to existing react-beautiful-dnd implementations. It does not replace the core logic — it just patches one limitation.

// Usage with react-beautiful-dnd (still requires full RBD setup)
import { withScrollContainer } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';

const EnhancedDroppable = withScrollContainer(Droppable);

// Then use <EnhancedDroppable> instead of <Droppable>

@shopify/draggable takes a framework-agnostic, DOM-first approach. It works by attaching event listeners directly to DOM elements and exposing lifecycle hooks. While it has a React adapter (@shopify/react-draggable), the core library doesn’t require React at all.

// @shopify/draggable (with React adapter)
import { DragManager, Draggable, Droppable } from '@shopify/react-draggable';

function TaskList({ tasks }) {
  return (
    <DragManager>
      <Droppable id="tasks">
        {tasks.map(task => (
          <Draggable key={task.id} id={task.id}>
            {({ dragging }) => (
              <div style={{ opacity: dragging ? 0.5 : 1 }}>
                {task.content}
              </div>
            )}
          </Draggable>
        ))}
      </Droppable>
    </DragManager>
  );
}

🖱️ Event Model and Customization

react-beautiful-dnd gives you high-level callbacks like onDragStart, onDragUpdate, and onDragEnd. These fire with normalized data (e.g., source and destination indices), but you have limited access to raw drag events.

// react-beautiful-dnd
const handleDragEnd = (result) => {
  const { source, destination } = result;
  if (!destination) return;
  // Reorder logic using source.index and destination.index
};

@shopify/draggable exposes lower-level control. You can listen to granular events like drag:start, drag:move, and drag:stop, and even cancel drags mid-flight. This is useful for complex interactions like multi-select dragging or custom drop previews.

// @shopify/draggable
const handleDragStart = (event) => {
  console.log('Dragging element:', event.dragElement);
  // Access original mouse/touch event via event.originalEvent
};

const handleDragStop = (event) => {
  const { source, destination } = event;
  // Similar reorder logic, but more event detail available
};

The autoscroll package adds no new events — it only modifies scroll behavior during an existing react-beautiful-dnd drag session.

📏 Layout and Performance Considerations

react-beautiful-dnd uses CSS transforms for smooth animations and avoids layout thrashing by measuring elements upfront. However, it requires strict DOM structure: every draggable must be a direct child of a droppable, and you must render {provided.placeholder}.

@shopify/draggable is more flexible with DOM structure but may require manual performance tuning (e.g., debouncing drag:move handlers). It supports virtualized lists out of the box via optional plugins.

The autoscroll package solves one specific pain point: when dragging near the edge of a scrollable container, react-beautiful-dnd wouldn’t auto-scroll. This wrapper adds that behavior by monitoring pointer position and scrolling the container.

🔄 Migration Path and Future-Proofing

Since react-beautiful-dnd is deprecated, Atlassian now recommends @atlaskit/pragmatic-drag-and-drop — a ground-up rewrite with:

• Better accessibility
• Reduced bundle size
• Support for horizontal + vertical scrolling
• No required React wrappers

If you’re starting fresh, skip all three packages in this comparison and evaluate the new @atlaskit/pragmatic-drag-and-drop instead.

For existing react-beautiful-dnd users needing autoscroll, the companion package is a temporary band-aid — but plan a migration.

@shopify/draggable remains actively maintained and is a solid choice if you need framework flexibility or fine-grained control.

🆚 Summary: Key Differences

💡 Final Recommendation

• Avoid both react-beautiful-dnd and its autoscroll wrapper unless you’re maintaining a legacy codebase. They’re end-of-life.
• Choose @shopify/draggable if you need a stable, flexible DnD solution that works across frameworks or requires deep customization.
• Evaluate @atlaskit/pragmatic-drag-and-drop (not in this comparison) for new React projects — it’s Atlassian’s modern replacement with better performance and accessibility.