[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73443":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},73443,"pragmatic-drag-and-drop","atlassian\u002Fpragmatic-drag-and-drop","atlassian","Fast drag and drop for any experience on any tech stack","https:\u002F\u002Fatlassian.design\u002Fcomponents\u002Fpragmatic-drag-and-drop",null,"TypeScript",12662,324,59,93,0,5,28,60,15,42.54,"Other",false,"main",[26,27,28,29],"dnd","drag-and-drop","dropzone","sortable","2026-06-12 02:03:13","\u003Cdiv align=\"center\">\n\u003Cpicture>\n  \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fgithub.com\u002Falexreardon\u002Ffiles\u002Fassets\u002F2182637\u002F4405f071-4d88-4ad7-bcc0-a050420f3f3e\" height=\"372px\" width=\"372px\" aria-label=\"Pragmatic drag and drop logo\">\n  \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falexreardon\u002Ffiles\u002Fassets\u002F2182637\u002F9e57e0bb-aa9b-4552-affa-59aecf70bfc0\" height=\"372px\" width=\"372px\" aria-label=\"Pragmatic drag and drop logo\">\n\u003C\u002Fpicture>\n\n_Fast drag and drop for any experience on any tech stack_\n\n[📖 **Documentation**](https:\u002F\u002Fatlassian.design\u002Fcomponents\u002Fpragmatic-drag-and-drop) | [🤹 **Examples**](https:\u002F\u002Fatlassian.design\u002Fcomponents\u002Fpragmatic-drag-and-drop\u002Fexamples) | [🎥  **How it works**](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=5SQkOyzZLHM)\n\n![Show case of some examples](https:\u002F\u002Fgithub.com\u002Falexreardon\u002Ffiles\u002Fassets\u002F2182637\u002F2b533f88-bf3f-402f-93f2-74a466918ac4)\n\n\u003C\u002Fdiv>\n\n\u003Cbr\u002F>\n\n## About\n\nPragmatic 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`](https:\u002F\u002Freact.dev\u002F), [`svelte`](https:\u002F\u002Fsvelte.dev\u002F), [`vue`](https:\u002F\u002Fvuejs.org\u002F), [`angular`](https:\u002F\u002Fangular.io\u002F) and so on). Pragmatic drag and drop is powering some of the biggest products on the web, including [Trello](https:\u002F\u002Ftrello.com), [Jira](https:\u002F\u002Fwww.atlassian.com\u002Fsoftware\u002Fjira) and [Confluence](https:\u002F\u002Fwww.atlassian.com\u002Fsoftware\u002Fconfluence).\n\n\u003Cdetails>\n    \u003Csummary>Capabilities\u003C\u002Fsummary>\n\nPragmatic drag and drop consists of a few high level pieces:\n\n1. **Low level drag and drop behavior**\n\nPragmatic 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.\n\nThese pieces are unopinionated about visual language or accessibility, and have no dependency on the Atlassian Design System.\n\n- _Tiny_: ~`4.7kB` core\n- _Incremental_: Only use the pieces that you need\n- _Headless_: Full rendering and style control\n- _Framework agnostic_: Works with any frontend framework\n- _Deferred compatible_: Delay the loading the core packages and optional packages in order to further improve page load speeds\n- _Flexible_: create any experience you want, make any changes you want during a drag operation.\n- _Works everywhere_: Full feature support in Firefox, Safari, and Chrome, iOS and Android\n- _Virtualization support_: create any virtual experience you want!\n\n2. **Optional visual outputs**\n\nWe 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.\n\n3. **Optional assistive technology controls**\n\nNot 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.\n\nThe 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.\n\n\u003C\u002Fdetails>\n\n## What is this repository?\n\nThis repository is currently one way mirror from our internal monorepo that contains all the code for Pragmatic drag and drop.\n\n\u003Cdiv align=\"center\">\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falexreardon\u002Ffiles\u002Fassets\u002F2182637\u002Fb45c2dfe-2c54-459e-a3e6-68b2342fe97b\" alt=\"Diagram of how the mirror works\" width=\"600px\">\n\n\u003C\u002Fdiv>\n\n 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!\n\nAll documentation and `npm` packages are public and available for use by everyone.\n\n## Can I use this with my own Design System?\n\nYep! Pragmatic drag and drop as a [small core package](https:\u002F\u002Fatlassian.design\u002Fcomponents\u002Fpragmatic-drag-and-drop\u002Fcore-package), and then a range of [optional packages](https:\u002F\u002Fatlassian.design\u002Fcomponents\u002Fpragmatic-drag-and-drop\u002Foptional-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\u002Ftokens`). 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.\n\n## Can I use my own design language?\n\nYep! 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!\n\n## What is `@atlaskit`?\n\nThe Pragmatic drag and drop packages are published under the `@atlaskit` namespace on `npm`\n\n```ts\nimport { draggable } from '@atlaskit\u002Fpragmatic-drag-and-drop\u002Felement\u002Fadapter';\n```\n\n`@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.\n\n## `npm` release and repo sync timing\n\nThis mirror repository is currently being synced with our internal repository once a day. We publish packages to `npm` immediately as we merge new versions into the internal repository. This means that code can be released onto `npm` up to 24 hours _before_ it is available in this mirror repository.\n\n## Credits\n\nMade with love by:\n\n- [Alex Reardon](https:\u002F\u002Ftwitter.com\u002Falexandereardon)\n- [Declan Warn](https:\u002F\u002Ftwitter.com\u002FDeclanWarn)\n- [Lewis Healey](https:\u002F\u002Ftwitter.com\u002Flewishealey)\n- [Eleni Misthos](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Felenimisthos\u002F)\n- [Jesse Bauer](https:\u002F\u002Fsoundcloud.com\u002Fjessebauer)\n- [Mitch Gavan](https:\u002F\u002Ftwitter.com\u002FMitchG23)\n- [Michael Abrahamian](https:\u002F\u002Ftwitter.com\u002Fmichaelguitars7)\n- [Tim Keir](https:\u002F\u002Ftwitter.com\u002FReDrUmNZ)\n- [Greta Ritchard](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fgretarit\u002F)\n- [Many other folks at Atlassian](https:\u002F\u002Fwww.atlassian.com\u002F)\n- Logo created by [Michelle Holik](https:\u002F\u002Ftwitter.com\u002Fmichelleholik) and [Vojta Holik](https:\u002F\u002Ftwitter.com\u002Fvojta_holik)\n\nPragmatic drag and drop stands on the shoulders of giants, including the folks who created the [drag and drop specifications](https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fdnd.html), implemented drag and drop in browsers, and the many drag and drop libraries that came before this.\n","Pragmatic drag and drop 是一个高效的拖放工具链，适用于任何技术栈上的用户体验。其核心功能包括轻量级（约4.7kB）、渐进式加载、无头设计以及框架无关性，支持React、Svelte、Vue和Angular等前端框架。此外，它还提供了可选的视觉输出和辅助技术控制，以增强无障碍体验。该项目非常适合需要在Web应用中实现灵活且高性能拖放功能的场景，如项目管理和协作工具。",2,"2026-06-11 03:45:35","high_star"]