Detect pointer events to initiate drag and drop operations.
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, }, }, }), ], });
PointerSensor.configure({ activationConstraints: { distance: { // Required distance in pixels value: 5, // Optional tolerance per axis tolerance: { x: 5, y: 0, // Restrict to vertical movement }, }, }, });
PointerSensor.configure({ activationConstraints: { delay: { // Required hold duration in ms value: 200, // Movement tolerance during delay tolerance: 5, }, }, });
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}, }; } }, });
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}; }; }
pointerdown
pointermove
pointerup
lostpointercapture
{ x: event.clientX, // Horizontal position y: event.clientY // Vertical position }