Modifiers let you dynamically modify the movement coordinates that are detected by sensors. They can be used for a wide range of use cases, for example:
Restricting motion to a single axis
Restricting motion to the draggable node container's bounding rectangle
Restricting motion to the draggable node's scroll container bounding rectangle
Applying resistance or clamping the motion
Installation
To start using modifiers, install the modifiers package via yarn or npm:
1
npm install @dnd-kit/modifiers
Copied!
Usage
The modifiers repository contains a number of useful modifiers that can be applied on DndContext as well as DragOverlay.
1
import{DndContext, DragOverlay}from'@dnd-kit';
2
import{
3
restrictToVerticalAxis,
4
restrictToWindowEdges,
5
}from'@dnd-kit/modifiers';
6
7
functionApp(){
8
return(
9
<DndContextmodifiers={[restrictToVerticalAxis]}>
10
{/* ... */}
11
<DragOverlaymodifiers={[restrictToWindowEdges]}>
12
{/* ... */}
13
</DragOverlay>
14
</DndContext>
15
)
16
}
Copied!
As you can see from the example above, DndContext and DragOverlay can both have different modifiers.
Built-in modifiers
Restricting motion to an axis
restrictToHorizontalAxis
Restrict movement to only the horizontal axis.
restrictToVerticalAxis
Restrict movement to only the vertical axis.
Restrict motion to a container's bounding rectangle
restrictToWindowEdges
Restrict movement to the edges of the window. This modifier can be useful to prevent the DragOverlay from being moved outside of the bounds of the window.
restrictToParentElement
Restrict movement to the parent element of the draggable item that is picked up.
restrictToFirstScrollableAncestor
Restrict movement to the first scrollable ancestor of the draggable item that is picked up.
Snap to grid
createSnapModifier
Function to create modifiers to snap to a given grid size.