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.
distanceproperty represents the distance, in pixels, by which the pointer needs to be moved before a drag start event is emitted.
delayproperty 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.
toleranceproperty 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
5pixels, the operation will only be aborted if the pointer is moved by more than 5 pixels during the delay.
touch-actionCSS property for all of your draggable elements.
nonefor draggable elements in order to prevent scrolling on mobile devices.
noneonly 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.
touchstartevent has been initiated, any changes to the
touch-actionvalue will be ignored. Programmatically changing the
touch-actionvalue for an element from
noneafter 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).