Github url


by atlassian

Beautiful and accessible drag and drop for lists with React

20.3K Stars 1.4K Forks Last release: 5 months ago (v13.0.0) Other 681 Commits 102 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react beautiful dnd logo

react-beautiful-dnd (rbd)

**Beautiful** and **accessible** drag and drop for lists with React CircleCI branch npm quote application example Play with this example if you want!

Core characteristics

  • Beautiful and natural movement of items ๐Ÿ’
  • Accessible: powerful keyboard and screen reader support โ™ฟ๏ธ
  • Extremely performant ๐Ÿš€
  • Clean and powerful api which is simple to get started with
  • Plays extremely well with standard browser interactions
  • Unopinionated styling
  • No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Get started ๐Ÿ‘ฉโ€๐Ÿซ

We have created [a free course on

๐Ÿฅš]( to help you get started with


as quickly as possible.


Currently supported feature set โœ…

  • Vertical lists โ†•
  • Horizontal lists โ†”
  • Movement between lists (โ–ค โ†” โ–ค)
  • Virtual list support ๐Ÿ‘พ - unlocking 10,000 items @ 60fps
  • Combining items
  • Mouse ๐Ÿญ, keyboard ๐ŸŽนโ™ฟ๏ธ and touch ๐Ÿ‘‰๐Ÿ“ฑ (mobile, tablet and so on) support
  • Multi drag support
  • 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 ๐Ÿ’–
  • Conditional dragging and conditional dropping
  • Multiple independent lists on the one page
  • Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)
  • Add and remove items during a drag
  • Compatible with semantic

 reordering - [table pattern]( [Auto scrolling]( - automatically scroll containers and the window as required during a drag (even with keyboard ๐Ÿ”ฅ)
- Custom drag handles - you can drag a whole item by just a part of it
- Able to move the dragging item to another element while dragging (clone, portal) - [Reparenting your 

- [Create scripted drag and drop experiences ๐ŸŽฎ](
- Allows extensions to support for [any input type you like ๐Ÿ•น](
- ๐ŸŒฒ Tree support through the [


]( package
- A 

 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)
- 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
- Server side rendering (SSR) compatible - see [resetServerContext()](
- Plays well with [nested interactive elements]( by default

## Motivation ๐Ÿค”


 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:
  - ๐Ÿ“– [Rethinking drag and drop](
  - ๐ŸŽง [React podcast: fast, accessible and beautiful drag and drop](

## Not for everyone โœŒ๏ธ

There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing [


]( It does an incredible job at providing a great set of drag and drop primitives which work especially well with the [wildly inconsistent]( html5 drag and drop feature.


 is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality 


 offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by 


. So 


 might not be for you depending on what your use case is.
## Documentation ๐Ÿ“–

### About ๐Ÿ‘‹

  - [Installation](
  - [Examples and samples](
  - [Get started](
  - [Design principles](
  - [Animations](
  - [Accessibility](
  - [Browser support](

### Sensors ๐Ÿ”‰

> The ways in which somebody can start and control a drag

  - [Mouse dragging ๐Ÿญ](
  - [Touch dragging ๐Ÿ‘‰๐Ÿ“ฑ](
  - [Keyboard dragging ๐ŸŽนโ™ฟ๏ธ](
  - [Create your own sensor]( (allows for any input type as well as scripted experiences)

### API ๐Ÿ‹๏ธโ€


  - [

]( - _Wraps the part of your application you want to have drag and drop enabled for_
  - [

]( - _An area that can be dropped into. Contains 

  - [

]( - _What can be dragged around_
  - [


]( - _Utility for server side rendering (SSR)_

### Guides ๐Ÿ—บ

  - [

 responders]( - 






  - [Combining 

  - [Common setup issues](
  - [Using 


  - [Setup problem detection and error recovery](
  - [Rules for 




  - [Browser focus retention](
  - [Customising or skipping the drop animation](
  - [Auto scrolling](
  - [Controlling the screen reader](
  - [Use the html5 


  - [




: type information](
  - [Dragging 

  - [Avoiding image flickering](
  - [Non-visible preset styles](
  - [How we detect scroll containers](
  - [How we use dom events]( - _Useful if you need to build on top of 


  - [Adding 

s during a drag (11.x behaviour)]( - _โš ๏ธ Advanced_
  - [Setting up Content Security Policy](

### Patterns ๐Ÿ‘ทโ€

  - [Virtual lists ๐Ÿ‘พ](
  - [Multi drag](
  - [Tables](
  - [Reparenting a 

``` ]( - Using our cloning API or your own portal

Support ๐Ÿ‘ฉโ€โš•๏ธ

Read this in other languages ๐ŸŒŽ

Author โœ๏ธ

Alex Reardon @alexandereardon

Collaborators ๐Ÿค

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.