Pointer

The Pointer sensor responds to Pointer events. It is one of the default sensors used by the DndContext provider if none are defined.

Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers).

The pointer is a hardware-agnostic device that can target a specific set of screen coordinates. Having a single event model for pointers can simplify creating Web sites and applications and provide a good user experience regardless of the user's hardware.

– Source: MDN​

Activator

The pointer activator is the onPointerDown event handler. The Pointer sensor is initialized if the pointer event was triggered by the primary pointer.

For mouse there is only one pointer, so it will always be the primary pointer. For touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. For pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen.

Activation constraints

The Pointer sensor has two activation constraints:

• Distance constraint

• Delay constraint

These activation constraints are mutually exclusive and may not be used simultaneously.

Distance

The distance constraint subscribes to the following interface:

interface DistanceConstraint {
  distance: number;
}

The distance property represents the distance, in pixels, by which the pointer needs to be moved before a drag start event is emitted.

Delay

The delay constraint subscribe to the following interface:

interface DelayConstraint {
  delay: number;
  tolerance: number;
}

The delay property represents the duration, in milliseconds, that a draggable item needs to be held by the primary pointer for before a drag start event is emitted.

The tolerance property represents the distance, in pixels, of motion that is tolerated before the drag operation is aborted. If the pointer is moved during the delay duration and the tolerance is set to zero, the drag operation will be immediately aborted. If a higher tolerance is set, for example, a tolerance of 5 pixels, the operation will only be aborted if the pointer is moved by more than 5 pixels during the delay.

This property is particularly useful for touch input, where some tolerance should be accounted for when using a delay constraint, as touch input is less precise than mouse input.

Recommendations

touch-action

We highly recommend you specify the touch-action CSS property for all of your draggable elements.

The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser). Source: MDN​

In general, we recommend you set the touch-action property to none for draggable elements in order to prevent scrolling on mobile devices.

If your draggable item is part of a scrollable list, we recommend you use a drag handle and set touch-action to none only for the drag handle, so that the contents of the list can still be scrolled, but that initiating a drag from the drag handle does not scroll the page.

Once a pointerdown or touchstart event has been initiated, any changes to the touch-action value will be ignored. Programmatically changing the touch-action value for an element from auto to none after a pointer or touch event has been initiated will not result in the user agent aborting or suppressing any default behavior for that event for as long as that pointer is active (for more details, refer to the Pointer Events Level 2 Spec).