> ## Content Index
> Fetch the complete content index at: https://huizhou92.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Atlassian Open Sources the Most Powerful “Pragmatic” Pragmatic drag and drop Component
- URL: https://huizhou92.com/atlassian-open-sources-the-most-powerful-pragmatic-pragmatic-drag-and-drop-component/
- Published: 2024-04-14T17:36:07.000Z
- Updated: 2026-09-08T02:37:36.000Z
- Description: A performance-oriented drag and drop component that supports various drag and drop scenarios, enhancing frontend user experience.
- Author: huizhou92
- Tags: #Migrated-1788833207488, #Import 2026-09-08 02:07

> Note: Non-members can read the full story in this [link](https://medium.hxzhouh.com/9a463ab73031?source=friends%5Flink&sk=04fe612c96673fa44da008eb17fddc88).

***Pragmatic drag and drop*** is a frontend component open-sourced by the well-known software development company Atlassian.

As the name suggests, ***Pragmatic drag and drop*** focuses on practicality, supporting many drag-and-drop scenarios, emphasizing performance, and making it safe and simple by leveraging browsers' powerful and flexible built-in drag-and-drop capabilities.

Core products under the Atlassian umbrella such as Trello, Jira, and Confluence utilize ***Pragmatic drag and drop***.

Before ***Pragmatic drag and drop***, Alex Reardon, the author of this component also developed another popular React open-source drag and drop component called **react-beautiful-dnd**.

Compared to it, ***Pragmatic drag and drop*** supports a wider range of drag and drop scenarios:

- Lists
- Panels
- Tables
- Trees
- Grids
- Drawing
- Resizing

![](https://huizhou92.com/content/images/2026/09/0-8q4jtciz5fiwotgu.jpg)

YouTube screenshot

The following images demonstrate the performance of ***Pragmatic Drag and Drop*** in different scenarios:

![](https://huizhou92.com/content/images/2026/09/0-u28xx0b4h82gjypv.gif)

[https://github.com/atlassian/pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop?ref=huizhou92.com)

![](https://huizhou92.com/content/images/2026/09/0-dkskerknd_zg0yes.gif)

[https://github.com/atlassian/pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop?ref=huizhou92.com)

***Pragmatic drag and drop*** also supports usage in any frontend framework (such as React, Svelte, Vue, Angular), not limited to specific technology stacks.

![](https://huizhou92.com/content/images/2026/09/0-qb4auhxzdkyeumha.jpg)

YouTube screenshot

Usage in different frameworks is as follows:

- React

![](https://huizhou92.com/content/images/2026/09/0-8upuategjzetkw32.jpg)

[https://github.com/atlassian/pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop?ref=huizhou92.com)

- Svelte

![](https://cdn-images-1.medium.com/max/800/0*VpnXyG4U7VBqZBrQ)

[https://github.com/atlassian/pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop?ref=huizhou92.com)

- JS

![](https://cdn-images-1.medium.com/max/800/0*OCAY3__Z-k1hs7VK)

[https://github.com/atlassian/pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop?ref=huizhou92.com)

Compared to other similar open-source drag-and-drop components, the core package of ***Pragmatic drag-and-drop*** is lighter after compression, at only 4.7kb.

![](https://huizhou92.com/content/images/2026/09/0-t2-z9yslmeg8n0vk.jpg)

YouTube screenshot

In terms of performance, compared to the following similar open-source frameworks:

- react-beautiful-dnd
- react-dnd
- dnd-kit

Pragmatic drag and drop’s TTI (Time to Interactive) metric is “far ahead”.

*TTI: Time to Interactive, measures the time it takes for a page to become interactive, from when it starts loading to when the main sub-resources have finished rendering and the page can quickly and reliably respond to user input.*

![](https://huizhou92.com/content/images/2026/09/0-glgexupnklnxesfx.jpg)

***Pragmatic drag and drop*** has only been officially open-sourced for two weeks but has already garnered over 3.5k stars on GitHub.

![](https://huizhou92.com/content/images/2026/09/0-rc-n2igt58h_lmvm.jpg)

[https://github.com/atlassian/pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop?ref=huizhou92.com)

For more details, visit [https://github.com/atlassian/pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop?ref=huizhou92.com)

### **References**

- [https://www.youtube.com/watch?v=5SQkOyzZLHM](https://www.youtube.com/watch?v=5SQkOyzZLHM&ref=huizhou92.com)
- [https://atlassian.design/components/pragmatic-drag-and-drop/about](https://atlassian.design/components/pragmatic-drag-and-drop/about?ref=huizhou92.com)

---

If you like my articles, consider to :

1. follow me -> [huizhou92](https://medium.hxzhouh.com/?ref=huizhou92.com)
2. Leave a clap👏 (50 👏👏👏👏would be the best) and a comment if you want to interact with me.
3. Receives an email every time I post on Medium -> [Click here](https://medium.hxzhouh.com/subscribe?ref=huizhou92.com)!
4. If you find my article helpful to you, please buy me a cup of [coffee](https://www.buymeacoffee.com/hxzhouh?ref=huizhou92.com)

[文章索引](/article-index/)