v148 · Web APIs · Drag & Drop
Multi-touch Drag Demo
Tests pointer event suppression with multi-touch scenarios. Drag a tile and observe pointercancel firing for that pointer ID while other active pointers continue receiving events — the Chrome 148 spec fix made visible.
Checking pointer event + drag event support…
tile grid
Drag any tile. Watch the event log — pointercancel fires as soon as the drag starts, suppressing further pointermove events for that pointer ID. The tile turns amber when its pointer stream is suppressed.
pointer state
Active pointer IDs
No active pointers.
pointerdown count0
pointermove count0
pointercancel count0
dragstart count0
suppressed pointers0
State diagram
Idle
waiting
→
Pointer
pointerdown
→
Drag
dragstart
→
Done
drop/dragend
When transitioning Pointer → Drag, Chrome 148 fires
pointercancel on the drag source.
This suppresses further pointer events for that pointer ID — the drag API takes exclusive control.
event log
——readyStart dragging a tile to see events.
the event sequence
// Chrome 148+ event sequence for a drag gesture:
// 1. pointerdown → drag source receives pointer, pointer ID assigned
// 2. pointermove → one or more moves before drag threshold is met
// 3. pointercancel → ← NEW in Chrome 148: drag took over the pointer stream
// This pointer ID is now SUPPRESSED — no more pointer events
// 4. dragstart → HTML Drag and Drop API takes exclusive control
// 5. drag → fires repeatedly while dragging
// 6. dragend → drag complete; pointer ID released
//
// Multi-touch scenario:
// - Pointer A: pointerdown → pointermove → [drag starts] → pointercancel (suppressed)
// - Pointer B: pointerdown → pointermove → pointermove → ... → pointerup (still active!)
// Pointer B is unaffected by Pointer A's suppressionreferences
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗