Sensors are an abstraction to detect different input methods in order to initiate drag operations, respond to movement and end or cancel the operation.
Activators
Sensors may define one or multiple activator events. Activator events use React SyntheticEvent listeners, which leads to improved performance over manually adding event listeners to each individual draggable node.
Sensors are initialized once one of the activator events is detected.
If necessary, you may also implement custom sensors to respond to other inputs or if the built-in sensors do not suit your needs. If you build a custom sensor and you think others could benefit, don't hesitate to open an RFC pull request.
Lifecycle
The lifecycle of a sensor is as follows:
Activator event detected, if the event is qualified, sensor class is initialized.
Sensor manually attaches new listeners to input methods upon initialization.
Sensor dispatches drag start event once constraints are met.
Sensor dispatches drag move events in response to input.
Sensor dispatches drag end or drag cancel event.
Sensor is torn down and cleans up manually attached event listeners.
From an implementation perspective, Sensors are classes.
They are class-based rather than hooks because they need to be instantiated synchronously to respond to user interactions immediately, and it must be possible for them to be conditionally invoked.
Hooks
useSensor
By default, DndContext uses the Pointer and Keyboard sensors.
If you'd like to use other sensors, such as the Mouse and Touch sensors instead, initialize those sensors separately with the options you'd like to use using the useSensor hook
// Require the mouse to move by 10 pixels before activating
6
activationConstraint:{
7
distance:10,
8
},
9
});
10
const touchSensor =useSensor(TouchSensor,{
11
// Press delay of 250ms, with tolerance of 5px of movement
12
activationConstraint:{
13
delay:250,
14
tolerance:5,
15
},
16
});
17
}
Copied!
useSensors
When initializing sensors with useSensor, make sure you pass the sensors to useSensors before passing them to DndContext:
1
import{
2
DndContext,
3
KeyboardSensor,
4
MouseSensor,
5
TouchSensor,
6
useSensor,
7
useSensors,
8
}from'@dnd-kit/core';
9
10
functionApp(){
11
const mouseSensor =useSensor(MouseSensor);
12
const touchSensor =useSensor(TouchSensor);
13
const keyboardSensor =useSensor(KeyboardSensor);
14
15
const sensors =useSensors(
16
mouseSensor,
17
touchSensor,
18
keyboardSensor,
19
);
20
21
return(
22
<DndContextsensors={sensors}>
23
{/* ... */}
24
</DndContext>
25
)
26
}
Copied!
In other examples across the documentation, you may also see sensors initialized without intermediate variables, which is equivalent to the syntax above: