Overview
The Pointer sensor responds to Pointer events for mouse, touch, and pen input. It is enabled by default in the DragDropManager.
Usage
import {DragDropManager} from '@dnd-kit/dom';
import {PointerSensor} from '@dnd-kit/dom/sensors';
const manager = new DragDropManager({
sensors: [
PointerSensor.configure({
activationConstraints: {
// Start dragging after moving 5px
distance: {
value: 5,
},
// Or after holding for 200ms
delay: {
value: 200,
tolerance: 10,
},
},
}),
],
});
Activation Constraints
The Pointer sensor supports two types of activation constraints that can be used together:
Distance Constraint
Activates dragging after the pointer moves a certain distance:
PointerSensor.configure({
activationConstraints: {
distance: {
// Required distance in pixels
value: 5,
// Optional tolerance per axis
tolerance: {
x: 5,
y: 0, // Restrict to vertical movement
},
},
},
});
Delay Constraint
Activates dragging after holding the pointer for a duration:
PointerSensor.configure({
activationConstraints: {
delay: {
// Required hold duration in ms
value: 200,
// Movement tolerance during delay
tolerance: 5,
},
},
});
Default Behavior
By default, the Pointer sensor uses different activation constraints based on the pointer type:
- Mouse: Immediate activation on drag handle
- Touch: 250ms delay with 5px tolerance
- Other pointers: 200ms delay with 5px distance threshold
You can customize this behavior:
PointerSensor.configure({
activationConstraints(event, source) {
const {pointerType, target} = event;
// Custom constraints based on pointer type
switch (pointerType) {
case 'mouse':
return {
distance: {value: 5},
};
case 'touch':
return {
delay: {value: 250, tolerance: 5},
};
default:
return {
delay: {value: 200},
distance: {value: 5},
};
}
},
});
API Reference
Options
activationConstraints
ActivationConstraints | ((event: PointerEvent, source: Draggable) => ActivationConstraints)
Configure when dragging should start:
interface ActivationConstraints {
// Distance-based activation
distance?: {
value: number;
tolerance?: number | {x?: number; y?: number};
};
// Time-based activation
delay?: {
value: number;
tolerance: number | {x?: number; y?: number};
};
}
Can be a fixed configuration or a function that returns constraints based on the event and source.
Events
The Pointer sensor handles these events:
pointerdown
: Initial pointer contact
pointermove
: Pointer movement
pointerup
: Pointer release
lostpointercapture
: Lost pointer tracking
Coordinates
The sensor provides pointer coordinates relative to the viewport:
{
x: event.clientX, // Horizontal position
y: event.clientY // Vertical position
}
These coordinates are automatically adjusted for scroll position and zoom level.
Best Practices
-
Use appropriate constraints for different input types:
- Shorter delays for mouse
- Longer delays with tolerance for touch
- Distance constraints for precision
-
Consider accessibility:
- Don’t rely solely on hover
- Provide clear activation feedback
- Support keyboard input via KeyboardSensor
Responses are generated using AI and may contain mistakes.