atlassian/pragmatic-drag-and-drop

★ 12,600TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((pragmatic-drag-and-drop))
    What It Does
      Reorder list items
      Drag between columns
      Drop files from desktop
    Tech Stack
      TypeScript
      npm package
      Browser native API
    Use Cases
      Kanban boards
      Sortable tables
      File upload zones
    Audience
      React developers
      Vue and Svelte devs
      Any JS framework
    Extras
      Keyboard accessibility
      Visual drop indicators

mindmap root((pragmatic-drag-and-drop)) What It Does Reorder list items Drag between columns Drop files from desktop Tech Stack TypeScript npm package Browser native API Use Cases Kanban boards Sortable tables File upload zones Audience React developers Vue and Svelte devs Any JS framework Extras Keyboard accessibility Visual drop indicators

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add drag-and-drop reordering to a React or Vue list without locking into a specific framework.

USE CASE 2

Build a kanban board like Trello where cards can be dragged between columns.

USE CASE 3

Support keyboard-only drag-and-drop so users who cannot use a mouse can still reorder items.

USE CASE 4

Enable drag-and-drop in a virtualized list where only visible rows are rendered in the DOM.

Tech stack

TypeScriptnpm

Getting it running

Difficulty · easy Time to first run · 30min

Optional accessibility and indicator add-on packages pull in Atlassian-specific styling, substitute your own components if you need a custom design.

In plain English

Pragmatic drag and drop is a TypeScript library from Atlassian for adding drag-and-drop functionality to web applications. It works on top of the browser's built-in drag-and-drop support rather than reimplementing it from scratch, which the authors say makes it more reliable across browsers. The library currently powers drag-and-drop in Trello, Jira, and Confluence. The design philosophy is to stay small and get out of the way. The core package is about 4.7 kilobytes, has no built-in visual styling, and does not depend on any particular frontend framework. It can be used with React, Svelte, Vue, Angular, or plain JavaScript. Optional add-on packages handle things like visual drop indicators and accessibility controls for users who cannot use a pointer or touchscreen for dragging. Those optional packages do depend on some Atlassian-specific styling libraries, but the README notes you can substitute your own components if you prefer a different design. The library is published on npm under the @atlaskit namespace, which is Atlassian's internal package namespace for public packages. Imports look like: import from '@atlaskit/pragmatic-drag-and-drop/element/adapter'. Documentation and interactive examples are hosted on the Atlassian design system website. This GitHub repository is a one-way mirror of Atlassian's internal codebase. The code is made public here, but the team does not currently accept code contributions through GitHub. The mirror is synced once per day, so new npm releases may appear up to 24 hours before the corresponding source code shows up in this repository. Issues and suggestions can still be filed here. The library supports all major desktop and mobile browsers including Firefox, Safari, and Chrome on both iOS and Android. It also includes support for virtualized lists, where only a portion of a long list is rendered in the DOM at any given time.

Copy-paste prompts

Prompt 1

Using @atlaskit/pragmatic-drag-and-drop, write React code to make a vertical list of items reorderable by dragging.

Prompt 2

How do I add a visual drop indicator line with pragmatic-drag-and-drop when dragging an item between list entries?

Prompt 3

Set up keyboard-accessible drag-and-drop with pragmatic-drag-and-drop for users who cannot use a mouse.

Prompt 4

How do I use pragmatic-drag-and-drop with a virtualized list in React where only visible rows are in the DOM?

Open on GitHub → Explain another repo

← atlassian on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.