Pragmatic Drag and Drop — Performance-First Drag & Drop by Atlassian

Introduction

Pragmatic Drag and Drop is a drag-and-drop library created by Atlassian to power products like Jira, Confluence, and Trello. It is designed to be framework-agnostic, performant at scale, and accessible, leveraging the browser's native drag-and-drop API rather than reimplementing it.

What Pragmatic Drag and Drop Does

• Enables drag and drop for elements, files, and text using the native browser API
• Works with React, Vue, Svelte, Angular, or vanilla JavaScript
• Provides adapters for common patterns: sortable lists, boards, and trees
• Handles accessibility with keyboard and screen reader support
• Scales to thousands of draggable items without performance degradation

Architecture Overview

The library is built around a thin adapter layer over the browser's native HTML Drag and Drop API. Rather than intercepting mouse events and managing positions manually, it hooks into standard drag events, which allows the browser to handle rendering efficiently. Addons like auto-scroll, hit detection, and live monitoring are composable modules that attach to the core without bundling unnecessary code.

Self-Hosting & Configuration

• Install via npm as @atlaskit/pragmatic-drag-and-drop
• Import only the adapters you need (element, file, or text)
• Combine with optional packages for auto-scroll, hit-test, and flourish animations
• No global configuration required; each draggable and drop target is set up independently
• Tree-shakeable — unused adapters and addons are excluded from the bundle

Key Features

• Native browser drag-and-drop foundation for predictable behavior and low overhead
• Tiny core with optional addon packages for auto-scroll, sorting, and visual feedback
• Accessibility built in with keyboard dragging and ARIA live regions
• Framework-agnostic API that works anywhere the DOM is available
• Battle-tested at Atlassian scale across Jira, Confluence, and Trello

Comparison with Similar Tools

• react-beautiful-dnd — Atlassian's older React-only library; Pragmatic DnD is its successor, framework-agnostic
• dnd-kit — React-specific with custom event handling; Pragmatic DnD uses the native drag API
• react-dnd — flexible but complex wrapper over HTML5 DnD; Pragmatic DnD offers a simpler composable API
• SortableJS — vanilla JS sortable lists; Pragmatic DnD adds board/tree patterns and accessibility
• @hello-pangea/dnd — community fork of react-beautiful-dnd; Pragmatic DnD is the official evolution

FAQ

Q: Why use the native drag-and-drop API instead of pointer events? A: The native API lets the browser handle rendering and hit detection, which is more performant at scale and provides free OS-level integration like dragging files into the browser.

Q: Can I migrate from react-beautiful-dnd? A: Yes. Atlassian provides a migration guide. The core concepts (draggables, drop targets) map closely, but the API surface is different.

Q: Does it support mobile touch dragging? A: Touch dragging works via the native API on supported browsers. For broader mobile support, a pointer-event adapter is available as an optional package.

Q: Is it production-ready? A: Yes. It powers drag and drop across Atlassian's product suite serving millions of users.

Sources

• https://github.com/atlassian/pragmatic-drag-and-drop
• https://atlassian.design/components/pragmatic-drag-and-drop