npm
or yarn
: DragOverlay
if your sortable list is scrollable or if the contents of the scrollable list are taller than the viewport of the window. Check out the sortable drag overlay guide below to learn more.@dnd-kit/core
to help building sortable interfaces. SortableContext
provides information via context that is consumed by the useSortable
hook.SortableContext
providers as we have containers:onDragOver
callback of DndContext
to detect when a draggable element is moved over a different container to insert it in that new container while dragging. DndContext
provider, the Sortable preset requires its own context provider that contains the sorted array of the unique identifiers associated to each sortable item:SortableContext
provides information via context that is consumed by the useSortable
hook, which is covered in greater detail in the next section. items
prop passed to SortableContext
be sorted in the same order in which the items are rendered, otherwise you may see unexpected results.DndContext
:SortableContext
component to function properly, make sure it is a descendant of a DndContext
provider. You may nest multiple SortableContext
components within the same parent DndContext
.useSortable
hook combines both the useDraggable
and useDroppable
hooks to connect elements as both draggable sources and drop targets:useDraggable
hook, the useSortable
hook should look very familiar, since, it is an abstraction on top of it. attributes
, listeners
,transform
and setNodeRef
properties, which you should already be familiar with if you've used the useDraggable
hook before, you'll notice that the useSortable
hook also provides a transition
property.transform
property for useSortable
represents the displacement and change of scale transformation that a sortable item needs to apply to transition to its new position without needing to update the DOM order.transform
property for the useSortable
hook behaves similarly to the transform
property of the useDraggable
hook for the active sortable item, when there is no DragOverlay
being used.250
milliseconds, with an easing function set to ease
, but you can customize this and pass any valid CSS transition timing function, or set the transition argument to null
to disable transitions entirely:25
pixels in the direction of the arrow key that was pressed. This is an arbitrary default, and can be customized using the coordinateGetter
option of the keyboard sensor. DndContext
.sortableKeyboardCoordinates
coordinate getter function provided by @dnd-kit/sortable
, and pass it to the coordiniateGetter
option of the Keyboard sensor.DndContext
if none are defined. We use the useSensor
and useSensors
hooks to initialize the sensors:rectSortingStrategy
: This is the default value, and is suitable for most use cases. This strategy does not support virtualized lists.verticalListSortingStrategy
: This strategy is optimized for vertical lists, and supports virtualized lists.horizontalListSortingStrategy
: This strategy is optimized for horizontal lists, and supports virtualized lists.rectSwappingStrategy
: Use this strategy to achieve swappable functionality.DndContext
is the rectangle intersection algorithm. While the rectangle intersection strategy is well suited for many use cases, it can be unforgiving, since it requires both the draggable and droppable bounding rectangles to come into direct contact and intersect.DndContext
and add a custom collision detection strategy:verticalListSortingStrategy
sorting strategy:DndContext
provider in order to update the order of the items on drag end.DragOverlay
if your sortable list is scrollable or if the contents of the scrollable list are taller than the viewport of the window.<DragOverlay>
component provides a way to render a draggable overlay that is removed from the normal document flow and is positioned relative to the viewport. The drag overlay also implements drop animations.DragOverlay
component is rendering the same component that calls useSortable
inside the DragOverlay
. This will lead to unexpected results, since there will be an id
collision between the two components both calling useDraggable
with the same id
, since useSortable
is an abstraction on top of useDraggable
.