apps/docs/extend/sensors/pointer-sensor.mdx
The Pointer sensor responds to Pointer events for mouse, touch, and pen input. It is enabled by default in the DragDropManager.
import {DragDropManager} from '@dnd-kit/dom';
import {PointerSensor, PointerActivationConstraints} from '@dnd-kit/dom';
const manager = new DragDropManager({
sensors: [
PointerSensor.configure({
activationConstraints: [
// Start dragging after moving 5px
new PointerActivationConstraints.Distance({value: 5}),
// Or after holding for 200ms with 10px tolerance
new PointerActivationConstraints.Delay({value: 200, tolerance: 10}),
],
}),
],
});
The Pointer sensor supports composable activation constraints through the PointerActivationConstraints class. Multiple constraints can be combined to create sophisticated activation behaviors.
Activates dragging after the pointer moves a certain distance:
import {PointerActivationConstraints} from '@dnd-kit/dom';
PointerSensor.configure({
activationConstraints: [
new PointerActivationConstraints.Distance({
// Required distance in pixels
value: 5,
// Optional tolerance - aborts if exceeded
tolerance: 10,
}),
],
});
The tolerance option defines a movement threshold that, if exceeded, will abort the activation. This is useful for distinguishing between intentional drags and accidental movements.
Activates dragging after holding the pointer for a duration:
import {PointerActivationConstraints} from '@dnd-kit/dom';
PointerSensor.configure({
activationConstraints: [
new PointerActivationConstraints.Delay({
// Required hold duration in ms
value: 200,
// Movement tolerance during delay (in pixels)
tolerance: 5,
}),
],
});
The tolerance option specifies how much the pointer can move during the delay period before the activation is aborted.
Multiple constraints can be combined in an array. The drag operation activates when any constraint is satisfied:
PointerSensor.configure({
activationConstraints: [
// Activate after 200ms delay OR 5px movement
new PointerActivationConstraints.Delay({value: 200, tolerance: 10}),
new PointerActivationConstraints.Distance({value: 5}),
],
});
By default, the Pointer sensor uses different activation constraints based on the pointer type and context:
You can customize this behavior by providing a function that returns constraints based on the event and source:
import {PointerActivationConstraints} from '@dnd-kit/dom';
PointerSensor.configure({
activationConstraints(event, source) {
const {pointerType, target} = event;
// Custom constraints based on pointer type
switch (pointerType) {
case 'mouse':
return [
new PointerActivationConstraints.Distance({value: 5}),
];
case 'touch':
return [
new PointerActivationConstraints.Delay({value: 250, tolerance: 5}),
];
default:
return [
new PointerActivationConstraints.Delay({value: 200, tolerance: 10}),
new PointerActivationConstraints.Distance({value: 5}),
];
}
},
});
import {PointerActivationConstraints} from '@dnd-kit/dom';
// Array of constraint instances
type ActivationConstraints<E extends Event> = ActivationConstraint<E>[];
// Distance type
type Distance = number | {x?: number; y?: number};
// Distance constraint
new PointerActivationConstraints.Distance({
value: number; // Required distance in pixels
tolerance?: Distance; // Optional abort threshold
});
// Delay constraint
new PointerActivationConstraints.Delay({
value: number; // Required duration in ms
tolerance: Distance; // Movement tolerance
});
Can be a fixed array of constraints or a function that returns constraints based on the event and source. </ParamField>
The PointerActivationConstraints class provides built-in constraint primitives. You can also create your own custom activation constraints by extending the ActivationConstraint class.
Activates dragging after the pointer moves a certain distance.
DistanceActivates dragging after holding the pointer for a duration.
The Pointer sensor handles these events:
pointerdown: Initial pointer contactpointermove: Pointer movementpointerup: Pointer releaseThe sensor automatically binds listeners across all same-origin documents, enabling drag operations across same-origin iframes.
Use appropriate constraints for different input types:
Consider accessibility: