@11grossmane/react-beautiful-dnd-no-scroll 中文文档教程
react-beautiful-dnd
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 egghead.io
???? to help you get started with react-beautiful-dnd
as quickly as possible.
Currently supported feature set ✅
- Vertical lists ↕
- Horizontal lists ↔
- Movement between lists (▤ ↔ ▤)
- 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
- Compatible with
ReactDOM.createPortal
- portal pattern - 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 ????
<DragDropContext />
responders -onDragStart
,onDragUpdate
,onDragEnd
andonBeforeDragStart
- Combining
<Draggable />
s - Common setup issues
- Using
innerRef
- Developer warnings and how to disable them
- Rules for
draggableId
anddroppableId
s - Customising or skipping the drop animation
- Auto scrolling
- Controlling the screen reader
- Use the html5
doctype
TypeScript
andflow
- Dragging
<svg>
s - Non-visible preset styles
- How we detect scroll containers
- How we use dom events - Useful if you need to build on top of
react-beautiful-dnd
- Adding
<Draggable />
s during a drag - ⚠️ Advanced
Patterns ????
Support ????⚕️
Read this in other languages ????
Author ✍️
Alex Reardon @alexandereardon
Collaborators ????
- Bogdan Chadkin @IAmTrySound
- Luke Batchelor @alukebatchelor
- Jared Crowe @jaredjcrowe
- Many other @Atlassian's!