# atlassian/pragmatic-drag-and-drop

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/atlassian-pragmatic-drag-and-drop).**

12,685 stars · 326 forks · TypeScript · NOASSERTION

## Links

- GitHub: https://github.com/atlassian/pragmatic-drag-and-drop
- Homepage: https://atlassian.design/components/pragmatic-drag-and-drop
- awesome-repositories: https://awesome-repositories.com/repository/atlassian-pragmatic-drag-and-drop.md

## Topics

`dnd` `drag-and-drop` `dropzone` `sortable`

## Description

Pragmatic Drag and Drop is a TypeScript library that provides a complete system for implementing drag and drop interactions in web applications. It handles the full lifecycle of drag operations, from registering drop targets and monitoring drag events to managing cleanup functions, all through a structured adapter-based approach.

The library supports a wide range of data manipulation patterns, including reordering items within lists, tables, trees, virtual lists, and side navigation, as well as moving items between lists and across columns in a board layout. It also enables swapping items in a grid, resizing elements, accepting files dropped from the operating system, and transferring data across browser windows or iframes.

Additional capabilities include utilities for reordering arrays based on drag position changes and combining multiple cleanup functions into a single call for easier teardown. The library is designed to work with HTML elements, text selections, and external content through dedicated adapters.

## Tags

### Part of an Awesome List

- [Drag Adapters](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop/drag-adapters.md) — Provides dedicated adapters for dragging HTML elements, text selections, and external content. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/core-package))
- [Drag and Resize Functionality](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop/drag-and-resize-functionality.md) — Provides functionality for resizing elements by dragging their edges or corners. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))

### Data & Databases

- [UI List Reordering](https://awesome-repositories.com/f/data-databases/list-element-reordering/ui-list-reordering.md) — Provides a mechanism for reordering items within a single list via drag-and-drop. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))

### Software Engineering & Architecture

- [Drag Lifecycle Events](https://awesome-repositories.com/f/software-engineering-architecture/event-driven-architectures/drag-lifecycle-events.md) — Listens for drag operation events to react to start, move, and end phases. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/core-package))
- [Tree Node Reorderers](https://awesome-repositories.com/f/software-engineering-architecture/trees/tree-node-reorderers.md) — Provides utilities for rearranging nodes in hierarchical tree structures via drag-and-drop. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))

### User Interface & Experience

- [Drop Target Registries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/drop-target-registries.md) — Provides a system for marking elements as valid drop zones during drag operations. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/core-package))
- [Multi-List Item Transfer](https://awesome-repositories.com/f/user-interface-experience/multi-list-item-transfer.md) — Ships a complete system for transferring items between lists via drag-and-drop. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))
- [Drag-and-Drop Row Reorderers](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-row-reorderers.md) — Ships a component for rearranging table rows via drag-and-drop interactions. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))
- [Reorderable Virtual Lists](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering/reorderable-virtual-lists.md) — Supports reordering items within a virtualized list via drag-and-drop. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))
- [Drag-and-Drop File Upload](https://awesome-repositories.com/f/user-interface-experience/file-uploaders/drag-and-drop-file-upload.md) — Provides a dedicated adapter for capturing files dragged from the operating system. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))
- [Data Transfer Mechanisms](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/data-transfer-mechanisms.md) — Shares drag data between browser tabs, iframes, or native applications during a drag operation. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))
- [Grid Item Swapping](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning/grid-item-swapping.md) — Enables swapping items in a grid layout via drag-and-drop. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))
- [Kanban Boards](https://awesome-repositories.com/f/user-interface-experience/kanban-boards.md) — Supports moving items between columns on a kanban-style board via drag-and-drop. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))
- [Sidebar Navigation Organization](https://awesome-repositories.com/f/user-interface-experience/sidebars/sidebar-navigation-organization.md) — Enables drag-and-drop reordering of navigation items within a sidebar. ([source](https://atlassian.design/components/pragmatic-drag-and-drop/examples))