https://github.com/atlassian/pragmatic-drag-and-drop Skip to content Navigation Menu Toggle navigation Sign in * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions For + Enterprise + Teams + Startups + Education By Solution + CI/CD & Automation + DevOps + DevSecOps Resources + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} atlassian / pragmatic-drag-and-drop Public * Notifications * Fork 74 * Star 5.3k * Fast drag and drop for any experience on any tech stack atlassian.design/components/pragmatic-drag-and-drop License View license 5.3k stars 74 forks Branches Tags Activity Star Notifications * Code * Issues 15 * Pull requests 0 * Discussions * Actions * Security * Insights Additional navigation options * Code * Issues * Pull requests * Discussions * Actions * Security * Insights atlassian/pragmatic-drag-and-drop This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main BranchesTags Go to file Code Folders and files Name Name Last commit Last commit message date Latest commit History 33 Commits packages packages patches patches .gitignore .gitignore CODE_OF_CONDUCT.md CODE_OF_CONDUCT.md CONTRIBUTING.md CONTRIBUTING.md LICENSE LICENSE README.md README.md jest.config.js jest.config.js package.json package.json tsconfig.json tsconfig.json yarn.lock yarn.lock View all files Repository files navigation * README * Code of conduct * License [9e57e0bb-aa9b-4552-affa-59aecf70bfc0] Fast drag and drop for any experience on any tech stack Documentation | Examples | How it works Show case of some examples About Pragmatic drag and drop is a low level drag and drop toolchain that enables safe and successful usage of the browsers built in drag and drop functionality. Pragmatic drag and drop can be used with any view layer (react, svelte, vue, angular and so on). Pragmatic drag and drop is powering some of the biggest products on the web, including Trello, Jira and Confluence. 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! 2. 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. 3. 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. What is this repository? This repository is currently one way mirror from our internal monorepo that contains all the code for Pragmatic drag and drop. Diagram of how the mirror works The intention of this repository is to make public our code, but not to accept code contributions (at this stage). In the future we could explore setting up a two way mirror so that contributions to this repo can also make their way back to our monorepo. You are still welcome to raise issues or suggestions on this repository! All documentation and npm packages are public and available for use by everyone Can I use this with my own Design System? Yep! Pragmatic drag and drop as a small core package, and then a range of optional packages. Some of the optional packages have dependencies on styling solutions (eg emotion), view libraries (eg react) or on some additional Atlassian outputs (eg @atlaskit/tokens). We have separated out optional packages that have other dependencies so they can be easily swapped with your own pieces that use your own tech stack and visual outputs. Can I use my own design language? Yep! We have created some design guidelines which embody how we want to achieve drag and drop in our products, and some of those decisions are embodied in some optional packages. However, you are free to use whatever design language you like, including ours! What is @atlaskit? The Pragmatic drag and drop packages are published under the @atlaskit namespace on npm import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'; @atlaskit is the npm namespace that we publish all of our public packages on from inside our internal monorepo. We could look at creating a separate namespace in the future just for Pragmatic drag and drop. If we do that, we'll release some tooling to help folks automatically switch over. Credits Made with love by: * Alex Reardon * Declan Warn * Lewis Healey * Eleni Misthos * Jesse Bauer * Mitch Gavan * Michael Abrahamian * Tim Keir * Greta Ritchard * Many other folks at Atlassian * Logo created by Michelle Holik and Vojta Holik Pragmatic drag and drop stands on the shoulders of giants, including the folks who created the drag and drop specifications, implemented drag and drop in browsers, and the many drag and drop libraries that came before this. About Fast drag and drop for any experience on any tech stack atlassian.design/components/pragmatic-drag-and-drop Topics dnd drag-and-drop sortable dropzone Resources Readme License View license Code of conduct Code of conduct Activity Custom properties Stars 5.3k stars Watchers 64 watching Forks 74 forks Report repository Languages * TypeScript 89.6% * MDX 10.4% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.