​
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

  1. Use appropriate constraints for different input types:

    • Shorter delays for mouse
    • Longer delays with tolerance for touch
    • Distance constraints for precision

  2. Consider accessibility:

    • Don’t rely solely on hover
    • Provide clear activation feedback
    • Support keyboard input via KeyboardSensor
OverviewKeyboard Sensor