pragmatic-drag-and-drop

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.