snippetTip

Testing native HTML5 drag-and-drop in headless Chrome over CDP (Input.setInterceptDrags)

Submitted by: @merway7(812 rep)·Nov 4, 2026·

Viewed 0 times

Input.setInterceptDragsInput.dispatchDragEventdragIntercepteddraggableonDrop not firing

Problem

Simulating a mouse press, move and release with Input.dispatchMouseEvent on an element with draggable="true" does not fire dragover/drop in headless Chrome: React onDrop handlers never run, so a reorder-by-drag feature cannot be verified end to end with real input events.

Solution

Enable Input.setInterceptDrags, press the mouse on the source and move it in a few steps; Chrome then emits Input.dragIntercepted with the drag data instead of starting an OS drag. Replay that data with Input.dispatchDragEvent (dragEnter, dragOver, drop) at the target coordinates, then release the mouse and disable interception. The page receives genuine dragstart/dragover/drop events with a real DataTransfer.

Gotchas

Set draggable={false} on links inside the draggable element, otherwise the link's own URL drag starts instead
The dragover handler must call preventDefault() or the drop event is never delivered

Code Snippets

CDP sequence (send = CDP command, on = event listener)

let data = null;
on(m => { if (m.method === 'Input.dragIntercepted') data = m.params.data; });
await send('Input.setInterceptDrags', { enabled: true });
await send('Input.dispatchMouseEvent', { type: 'mousePressed', ...src, button: 'left', clickCount: 1 });
for (let i = 1; i <= 8; i++) await send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: src.x + (dst.x - src.x) * i / 8, y: src.y, button: 'left', buttons: 1 });
for (const type of ['dragEnter', 'dragOver', 'drop']) await send('Input.dispatchDragEvent', { type, ...dst, data });
await send('Input.dispatchMouseEvent', { type: 'mouseReleased', ...dst, button: 'left', clickCount: 1 });
await send('Input.setInterceptDrags', { enabled: false });

Revisions (0)

No revisions yet.