Implementation:Microsoft Playwright CrDragDrop

Knowledge Sources	Microsoft_Playwright
Domains	Chromium, Input
Last Updated	2026-02-12 00:00 GMT

Overview

Concrete tool for managing drag-and-drop operations in Chromium browsers via the CDP Input domain provided by the Playwright library.

Description

The `DragManager` class handles drag-and-drop interactions in Chromium by intercepting mouse move and mouse up events that occur during a drag operation. It maintains the current drag state (`Protocol.Input.DragData`) and last position. When a mouse move occurs during a drag, it dispatches `Input.dispatchDragEvent` with type `dragOver`. When a mouse up occurs, it dispatches a `drop` event. The class intercepts drag initiation by listening for the `Input.dragIntercepted` CDP event during move operations, and supports drag cancellation via the Escape key. It also provides a `cancelDrag` method that sends a `dragCancel` event.

Usage

Use CrDragDrop when Playwright performs drag-and-drop actions on Chromium pages, providing the low-level CDP drag event orchestration.

Code Reference

Source Location

• Repository: Microsoft_Playwright
• File: packages/playwright-core/src/server/chromium/crDragDrop.ts

Signature

export class DragManager {
  constructor(page: CRPage);
  async cancelDrag(): Promise<boolean>;
  async interceptDragCausedByMove(
    progress: Progress, x: number, y: number,
    button: types.MouseButton | 'none',
    buttons: Set<types.MouseButton>,
    modifiers: Set<types.KeyboardModifier>,
    moveCallback: () => Promise<void>
  ): Promise<void>;
  isDragging(): boolean;
  async drop(progress: Progress, x: number, y: number, modifiers: Set<types.KeyboardModifier>): Promise<void>;
}

Import

import { DragManager } from '../server/chromium/crDragDrop';

I/O Contract

Inputs

Name	Type	Required	Description
page	CRPage	Yes	The Chromium page for dispatching drag events
progress	Progress	Yes	Progress tracker for cancellation
x, y	number	Yes	Coordinates for drag events
modifiers	Set<types.KeyboardModifier>	Yes	Active keyboard modifiers during drag
moveCallback	() => Promise<void>	Yes	Callback to perform the actual mouse move

Outputs

Name	Type	Description
cancelled	boolean	Whether a drag was successfully cancelled
(side effect)	void	Drag events dispatched via CDP

Usage Examples

import { DragManager } from '../server/chromium/crDragDrop';

const dragManager = new DragManager(crPage);
await dragManager.interceptDragCausedByMove(progress, 200, 300, 'left', new Set(['left']), new Set(), async () => {
  await crSession.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: 200, y: 300 });
});
if (dragManager.isDragging()) {
  await dragManager.drop(progress, 400, 500, new Set());
}

Related Pages

• Environment:Microsoft_Playwright_Node_Runtime_Environment