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.
onPointerDown
event handler. The Pointer sensor is initialized if the pointer event was triggered by the primary pointer.distance
property represents the distance, in pixels, by which the pointer needs to be moved before a drag start event is emitted.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. 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.touch-action
touch-action
CSS property for all of your draggable elements.Thetouch-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
touch-action
property to none
for draggable elements in order to prevent scrolling on mobile devices. touch-action: none;
is the only way to reliably prevent scrolling for pointer events.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.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).