GitHub - atlassian/react-beautiful-dnd: Beautiful, accessible drag and drop for...
source link: https://github.com/atlassian/react-beautiful-dnd
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React
Files
Maintenance & support
This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and have no current plans for further feature development or improvements.
It will continue to be here on GitHub and we will still make critical updates (e.g. security fixes, if any) as required, but will not be actively monitoring or replying to issues and pull requests.
We recommend that you don’t raise issues or pull requests, as they will not be reviewed or actioned until further notice.
react-beautiful-dnd (rbd)
Beautiful and accessible drag and drop for lists with React
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 to help you get started with react-beautiful-dnd
as quickly as possible.
Currently supported feature set
- Vertical lists
- Horizontal lists
- Movement between lists (▤ ▤)
- - 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
<table>
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
<Draggable />
- Allows extensions to support for
- Tree support through the
@atlaskit/tree
package - A
<Droppable />
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
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:
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 react-dnd
. 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. 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.
Documentation
About
Sensors
The ways in which somebody can start and control a drag
API ️
<DragDropContext />
- Wraps the part of your application you want to have drag and drop enabled for<Droppable />
- An area that can be dropped into. Contains<Draggable />
s<Draggable />
- What can be dragged aroundresetServerContext()
- Utility for server side rendering (SSR)
Guides
Patterns 👷
Support
Read this in other languages
Creator
Alex Reardon @alexandereardon
Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.
Maintainers
Collaborators
- Bogdan Chadkin @IAmTrySound
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK