[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1763":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":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":14,"lastSyncTime":33,"discoverSource":34},1763,"react-beautiful-dnd","atlassian\u002Freact-beautiful-dnd","atlassian","Beautiful and accessible drag and drop for lists with React","https:\u002F\u002Freact-beautiful-dnd.netlify.app",null,"JavaScript",33988,2715,2,571,0,3,70.3,"Other",true,false,"master",[24,25,26,27,28,29],"dnd","drag","drag-and-drop","react","reordering","sortable","2026-06-12 04:00:11","## 🔒 Archived\n\nThis project is now [archived](https:\u002F\u002Fdocs.github.com\u002Fen\u002Frepositories\u002Farchiving-a-github-repository\u002Farchiving-repositories) and is [deprecated on `npm`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-beautiful-dnd). If you are still using `react-beautiful-dnd`, we have put together some [resources to help you move forward](https:\u002F\u002Fgithub.com\u002Fatlassian\u002Freact-beautiful-dnd\u002Fissues\u002F2672). To see our ongoing work in the drag and drop problem space, head to [Pragmatic drag and drop](https:\u002F\u002Fgithub.com\u002Fatlassian\u002Fpragmatic-drag-and-drop).\n\nWe are so grateful to everybody who contributed in big and small ways to this project.\n\nCheers\n\n\u003Cbr>\n\n---\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F2182637\u002F53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png\" alt=\"react beautiful dnd logo\" \u002F>\n\u003C\u002Fp>\n\u003Ch1 align=\"center\">react-beautiful-dnd \u003Csmall>\u003Csup>(rbd)\u003C\u002Fsup>\u003C\u002Fsmall>\u003C\u002Fh1>\n\n\u003Cdiv align=\"center\">\n\n**Beautiful** and **accessible** drag and drop for lists with [`React`](https:\u002F\u002Ffacebook.github.io\u002Freact\u002F)\n\n[![CircleCI branch](https:\u002F\u002Fimg.shields.io\u002Fcircleci\u002Fproject\u002Fgithub\u002Fatlassian\u002Freact-beautiful-dnd\u002Fmaster.svg)](https:\u002F\u002Fcircleci.com\u002Fgh\u002Fatlassian\u002Freact-beautiful-dnd\u002Ftree\u002Fmaster)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-beautiful-dnd.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-beautiful-dnd)\n\n![quote application example](https:\u002F\u002Fuser-images.githubusercontent.com\u002F2182637\u002F53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif)\n\n[Play with this example if you want!](https:\u002F\u002Freact-beautiful-dnd.netlify.app\u002Fiframe.html?selectedKind=board&selectedStory=simple)\n\n\u003C\u002Fdiv>\n\n## Core characteristics\n\n- Beautiful and [natural movement](\u002Fdocs\u002Fabout\u002Fanimations.md) of items 💐\n- [Accessible](\u002Fdocs\u002Fabout\u002Faccessibility.md): powerful keyboard and screen reader support ♿️\n- [Extremely performant](\u002Fdocs\u002Fsupport\u002Fmedia.md) 🚀\n- Clean and powerful api which is simple to get started with\n- Plays extremely well with standard browser interactions\n- [Unopinionated styling](\u002Fdocs\u002Fguides\u002Fpreset-styles.md)\n- No creation of additional wrapper dom nodes - flexbox and focus management friendly!\n\n## Get started 👩‍🏫\n\nWe have created [a free course on `egghead.io` 🥚](https:\u002F\u002Fegghead.io\u002Fcourses\u002Fbeautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd) to help you get started with `react-beautiful-dnd` as quickly as possible.\n\n[![course-logo](https:\u002F\u002Fuser-images.githubusercontent.com\u002F2182637\u002F43372837-8c72d3f8-93e8-11e8-9d92-a82adde7718f.png)](https:\u002F\u002Fegghead.io\u002Fcourses\u002Fbeautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)\n\n## Currently supported feature set ✅\n\n- Vertical lists ↕\n- Horizontal lists ↔\n- Movement between lists (▤ ↔ ▤)\n- [Virtual list support 👾](\u002Fdocs\u002Fpatterns\u002Fvirtual-lists.md) - unlocking 10,000 items @ 60fps\n- [Combining items](\u002Fdocs\u002Fguides\u002Fcombining.md)\n- Mouse 🐭, keyboard 🎹♿️ and touch 👉📱 (mobile, tablet and so on) support\n- [Multi drag support](\u002Fdocs\u002Fpatterns\u002Fmulti-drag.md)\n- Incredible screen reader support ♿️ - we provide an amazing experience for english screen readers out of the box 📦. We also provide complete customisation control and internationalisation support for those who need it 💖\n- [Conditional dragging](\u002Fdocs\u002Fapi\u002Fdraggable.md#optional-props) and [conditional dropping](\u002Fdocs\u002Fapi\u002Fdroppable.md#conditionally-dropping)\n- Multiple independent lists on the one page\n- Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)\n- [Add and remove items during a drag](\u002Fdocs\u002Fguides\u002Fchanges-while-dragging.md)\n- Compatible with semantic `\u003Ctable>` reordering - [table pattern](\u002Fdocs\u002Fpatterns\u002Ftables.md)\n- [Auto scrolling](\u002Fdocs\u002Fguides\u002Fauto-scrolling.md) - automatically scroll containers and the window as required during a drag (even with keyboard 🔥)\n- Custom drag handles - you can drag a whole item by just a part of it\n- Able to move the dragging item to another element while dragging (clone, portal) - [Reparenting your `\u003CDraggable \u002F>`](\u002Fdocs\u002Fguides\u002Freparenting.md)\n- [Create scripted drag and drop experiences 🎮](\u002Fdocs\u002Fsensors\u002Fsensor-api.md)\n- Allows extensions to support for [any input type you like 🕹](\u002Fdocs\u002Fsensors\u002Fsensor-api.md)\n- 🌲 Tree support through the [`@atlaskit\u002Ftree`](https:\u002F\u002Fatlaskit.atlassian.com\u002Fpackages\u002Fconfluence\u002Ftree) package\n- A `\u003CDroppable \u002F>` list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)\n- Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list\n- Server side rendering (SSR) compatible - see [resetServerContext()](\u002Fdocs\u002Fapi\u002Freset-server-context.md)\n- Plays well with [nested interactive elements](\u002Fdocs\u002Fapi\u002Fdraggable.md#interactive-child-elements-within-a-draggable-) by default\n\n## Motivation 🤔\n\n`react-beautiful-dnd` exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:\n\n- 📖 [Rethinking drag and drop](https:\u002F\u002Fmedium.com\u002F@alexandereardon\u002Frethinking-drag-and-drop-d9f5770b4e6b)\n- 🎧 [React podcast: fast, accessible and beautiful drag and drop](https:\u002F\u002Freactpodcast.simplecast.fm\u002F17)\n\n## Not for everyone ✌️\n\nThere are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing [`react-dnd`](https:\u002F\u002Fgithub.com\u002Freact-dnd\u002Freact-dnd). It does an incredible job at providing a great set of drag and drop primitives which work especially well with the [wildly inconsistent](https:\u002F\u002Fwww.quirksmode.org\u002Fblog\u002Farchives\u002F2009\u002F09\u002Fthe_html5_drag.html) html5 drag and drop feature. `react-beautiful-dnd` is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality `react-beautiful-dnd` offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by `react-dnd`. So `react-beautiful-dnd` might not be for you depending on what your use case is.\n\n## Documentation 📖\n\n### About 👋\n\n- [Installation](\u002Fdocs\u002Fabout\u002Finstallation.md)\n- [Examples and samples](\u002Fdocs\u002Fabout\u002Fexamples.md)\n- [Get started](https:\u002F\u002Fegghead.io\u002Fcourses\u002Fbeautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)\n- [Design principles](\u002Fdocs\u002Fabout\u002Fdesign-principles.md)\n- [Animations](\u002Fdocs\u002Fabout\u002Fanimations.md)\n- [Accessibility](\u002Fdocs\u002Fabout\u002Faccessibility.md)\n- [Browser support](\u002Fdocs\u002Fabout\u002Fbrowser-support.md)\n\n### Sensors 🔉\n\n> The ways in which somebody can start and control a drag\n\n- [Mouse dragging 🐭](\u002Fdocs\u002Fsensors\u002Fmouse.md)\n- [Touch dragging 👉📱](\u002Fdocs\u002Fsensors\u002Ftouch.md)\n- [Keyboard dragging 🎹♿️](\u002Fdocs\u002Fsensors\u002Fkeyboard.md)\n- [Create your own sensor](\u002Fdocs\u002Fsensors\u002Fsensor-api.md) (allows for any input type as well as scripted experiences)\n\n### API 🏋️‍\n\n![diagram](https:\u002F\u002Fuser-images.githubusercontent.com\u002F2182637\u002F53607406-c8f3a780-3c12-11e9-979c-7f3b5bd1bfbd.gif)\n\n- [`\u003CDragDropContext \u002F>`](\u002Fdocs\u002Fapi\u002Fdrag-drop-context.md) - _Wraps the part of your application you want to have drag and drop enabled for_\n- [`\u003CDroppable \u002F>`](\u002Fdocs\u002Fapi\u002Fdroppable.md) - _An area that can be dropped into. Contains `\u003CDraggable \u002F>`s_\n- [`\u003CDraggable \u002F>`](\u002Fdocs\u002Fapi\u002Fdraggable.md) - _What can be dragged around_\n- [`resetServerContext()`](\u002Fdocs\u002Fapi\u002Freset-server-context.md) - _Utility for server side rendering (SSR)_\n\n### Guides 🗺\n\n- [`\u003CDragDropContext \u002F>` responders](\u002Fdocs\u002Fguides\u002Fresponders.md) - _`onDragStart`, `onDragUpdate`, `onDragEnd` and `onBeforeDragStart`_\n- [Combining `\u003CDraggable \u002F>`s](\u002Fdocs\u002Fguides\u002Fcombining.md)\n- [Common setup issues](\u002Fdocs\u002Fguides\u002Fcommon-setup-issues.md)\n- [Using `innerRef`](\u002Fdocs\u002Fguides\u002Fusing-inner-ref.md)\n- [Setup problem detection and error recovery](\u002Fdocs\u002Fguides\u002Fsetup-problem-detection-and-error-recovery.md)\n- [Rules for `draggableId` and `droppableId`s](\u002Fdocs\u002Fguides\u002Fidentifiers.md)\n- [Browser focus retention](\u002Fdocs\u002Fguides\u002Fbrowser-focus.md)\n- [Customising or skipping the drop animation](\u002Fdocs\u002Fguides\u002Fdrop-animation.md)\n- [Auto scrolling](\u002Fdocs\u002Fguides\u002Fauto-scrolling.md)\n- [Controlling the screen reader](\u002Fdocs\u002Fguides\u002Fscreen-reader.md)\n- [Use the html5 `doctype`](\u002Fdocs\u002Fguides\u002Fdoctype.md)\n- [`TypeScript` and `flow`: type information](\u002Fdocs\u002Fguides\u002Ftypes.md)\n- [Dragging `\u003Csvg>`s](\u002Fdocs\u002Fguides\u002Fdragging-svgs.md)\n- [Avoiding image flickering](\u002Fdocs\u002Fguides\u002Favoiding-image-flickering.md)\n- [Non-visible preset styles](\u002Fdocs\u002Fguides\u002Fpreset-styles.md)\n- [How we detect scroll containers](\u002Fdocs\u002Fguides\u002Fhow-we-detect-scroll-containers.md)\n- [How we use dom events](\u002Fdocs\u002Fguides\u002Fhow-we-use-dom-events.md) - _Useful if you need to build on top of `react-beautiful-dnd`_\n- [Adding `\u003CDraggable \u002F>`s during a drag (11.x behaviour)](\u002Fdocs\u002Fguides\u002Fchanges-while-dragging.md) - _⚠️ Advanced_\n- [Setting up Content Security Policy](\u002Fdocs\u002Fguides\u002Fcontent-security-policy.md)\n\n### Patterns 👷‍\n\n- [Virtual lists 👾](\u002Fdocs\u002Fpatterns\u002Fvirtual-lists.md)\n- [Multi drag](\u002Fdocs\u002Fpatterns\u002Fmulti-drag.md)\n- [Tables](\u002Fdocs\u002Fpatterns\u002Ftables.md)\n- [Reparenting a `\u003CDraggable \u002F>`](\u002Fdocs\u002Fguides\u002Freparenting.md) - _Using our cloning API or your own portal_\n\n### Support 👩‍⚕️\n\n- [Engineering health](\u002Fdocs\u002Fsupport\u002Fengineering-health.md)\n- [Community and addons](\u002Fdocs\u002Fsupport\u002Fcommunity-and-addons.md)\n- [Release notes and changelog](https:\u002F\u002Fgithub.com\u002Fatlassian\u002Freact-beautiful-dnd\u002Freleases)\n- [Upgrading](\u002Fdocs\u002Fsupport\u002Fupgrading.md)\n- [Road map](https:\u002F\u002Fgithub.com\u002Fatlassian\u002Freact-beautiful-dnd\u002Fissues)\n- [Media](\u002Fdocs\u002Fsupport\u002Fmedia.md)\n\n## Read this in other languages 🌎\n\n- [![kr](https:\u002F\u002Fraw.githubusercontent.com\u002Fgosquared\u002Fflags\u002Fmaster\u002Fflags\u002Fflags\u002Fshiny\u002F24\u002FSouth-Korea.png) **한글\u002FKorean**](https:\u002F\u002Fgithub.com\u002FLeeHyungGeun\u002Freact-beautiful-dnd-kr)\n- [![ru](https:\u002F\u002Fraw.githubusercontent.com\u002Fgosquared\u002Fflags\u002Fmaster\u002Fflags\u002Fflags\u002Fshiny\u002F24\u002FRussia.png) **На русском\u002FRussian**](https:\u002F\u002Fgithub.com\u002Fvtereshyn\u002Freact-beautiful-dnd-ru)\n- [![pt](https:\u002F\u002Fraw.githubusercontent.com\u002Fgosquared\u002Fflags\u002Fmaster\u002Fflags\u002Fflags\u002Fshiny\u002F24\u002FBrazil.png) **Português\u002FPortuguese**](https:\u002F\u002Fgithub.com\u002Fdudestein\u002Freact-beautiful-dnd-pt)\n- [![gr](https:\u002F\u002Fraw.githubusercontent.com\u002Fgosquared\u002Fflags\u002Fmaster\u002Fflags\u002Fflags\u002Fshiny\u002F24\u002FGreece.png) **Ελληνικά\u002FGreek**](https:\u002F\u002Fgithub.com\u002Fmilvard\u002Freact-beautiful-dnd-gr)\n- [![ja](https:\u002F\u002Fraw.githubusercontent.com\u002Fgosquared\u002Fflags\u002Fmaster\u002Fflags\u002Fflags\u002Fshiny\u002F24\u002FJapan.png) **日本語\u002FJapanese**](https:\u002F\u002Fgithub.com\u002Feltociear\u002Freact-beautiful-dnd-ja)\n\n## Creator ✍️\n\nAlex Reardon [@alexandereardon](https:\u002F\u002Fx.com\u002Falexandereardon)\n\n> Alex is no longer personally maintaining this project. The other wonderful maintainers are carrying this project forward.\n\n## Maintainers\n\n- [Daniel Del Core](https:\u002F\u002Fx.com\u002Fdanieldelcore)\n- Many other [@Atlassian](https:\u002F\u002Fx.com\u002FAtlassian)'s!\n\n## Collaborators 🤝\n\n- Bogdan Chadkin [@IAmTrySound](https:\u002F\u002Fx.com\u002FIAmTrySound)\n","react-beautiful-dnd 是一个用于 React 应用程序中的列表拖拽排序库。其核心功能包括流畅自然的动画效果、强大的键盘和屏幕阅读器支持以及极高的性能表现，同时提供简洁且易于上手的 API。该库不创建额外的 DOM 节点，对 Flexbox 和焦点管理友好，并且支持垂直列表、水平列表、列表间移动、虚拟列表等特性。适用于需要在网页应用中实现美观且无障碍拖拽排序功能的各种场景，如任务管理工具、看板系统等。尽管该项目已被归档并从 npm 中废弃，但它为开发者们提供了丰富的资源以帮助迁移至其他解决方案。","2026-06-11 02:45:54","top_all"]