Pragmatic drag and drop

Flexible and fast drag and drop for any experience on any tech stack
AboutComparison
Github

Pragmatic drag and drop is a performance focused drag and drop library that can be used to power any drag and drop experience on any tech stack. Pragmatic drag and drop makes working with the browsers powerful and flexible built in drag and drop functionality safe and easy.

Confluence
LaraDesign Manager
LeoContent Designer
LydiaProduct Manager
MaribelProgram Manager
MiloEngineer
MyraSenior Engineer
NarulPrincipal Engineer
NorahEngineering Manager
OliverDesigner
RahulSenior Designer
Jira
RenatoLead Designer
SteveDesign Manager
TanyaContent Designer
ToriProduct Manager
VaniaProgram Manager
AlexanderEngineer
AlizaSenior Engineer
AlvinPrincipal Engineer
AngieEngineering Manager
ArjunDesigner
Trello
BlairSenior Designer
ClaudiaLead Designer
ColinDesign Manager
EdContent Designer
EffieProduct Manager
EliotProgram Manager
FabianEngineer
GaelSenior Engineer
GerardPrincipal Engineer
HasanEngineering Manager

Get started

  • Check out our examples to be inspired
  • Head over to our tutorial to learn about all the pieces
  • Grab the core package and start building!

Capabilities

Pragmatic drag and drop consists of a few high level pieces:

  1. Low level drag and drop behavior

Pragmatic drag and drop contains a core package, and a number of optional packages, that provide you the pieces to create any drag and drop experience.

These pieces are unopinionated about visual language or accessibility, and have no dependency on the Atlassian Design System.

  • Tiny: ~4.7kB core
  • Incremental: Only use the pieces that you need
  • Headless: Full rendering and style control
  • Framework agnostic: Works with any frontend framework
  • Deferred compatible: Delay the loading the core packages and optional packages in order to further improve page load speeds
  • Flexible: create any experience you want, make any changes you want during a drag operation.
  • Works everywhere: Full feature support in Firefox, Safari, and Chrome, iOS and Android
  • Virtualization support: create any virtual experience you want!
  1. Optional visual outputs

We have created optional visual outputs (eg our drop indicator) to make it super fast for us to build consistent Atlassian user experiences. Non Atlassian consumers are welcome to use these outputs, create their own that copy the visual styling, or go a totally different direction.

  1. Optional assistive technology controls

Not all users can achieve pointer based drag and drop experiences. In order to achieve fantastic experiences for assistive technology users, we provide a toolchain to allow you to quickly wire up performant assistive technology friendly flows for any experience.

The optional assistive controls we provide are based on the Atlassian Design System. If you do not want to use the Atlassian Design System, you can use our guidelines and substitute our components with your own components, or you can go about accessibility in a different way if you choose.

Detailed capabilities

(Using the element adapter)

  • Drag handles (drag a draggable element) by a part of it
  • Conditional dragging
  • Nested draggable elements
  • Flexible draggable sizes
  • Many options to customize the appearance of the drag preview (the thing that a user drags around during a drag)
  • Can add, remove, or change draggables while dragging (even the dragging draggable)
  • An element can be a drop target, draggable or both
  • An element can be a drop target for different entities (eg dropTargetForElements and dropTargetForExternal)

How it works

A technical explanation of how Pragmatic drag and drop is architected for speed

Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License