<table>reordering - table pattern
<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)
@react-forked/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:
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-forked/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-forked/dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by
@react-forked/dnd might not be for you depending on what your use case is.
The ways in which somebody can start and control a drag
<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 />- What can be dragged around
resetServerContext()- Utility for server side rendering (SSR)
<DragDropContext />responders -
flow: type information
<Draggable />s during a drag (11.x behaviour) - ⚠️ Advanced
<Draggable />- Using our cloning API or your own portal
⚠️ These following translations are based on react-beautiful-dnd.
Alex Reardon @alexandereardon