[Feature] drag and drop

Drag and drop should work with playwright. Using the existing mouse apis should generate working dragstart, drag, and drop events. There should also be new APIs to simulate dropping in external content, and to inspect content dragged from the web page.

[krokofant]

@bsteffensTempus I was missing some clear documentation as well and I implemented this based on the new features:

async dragDrop(originSelector: string, destinationSelector: string) {
	const originElement = await this.page.waitForSelector(originSelector);
	const destinationElement = await this.page.waitForSelector(destinationSelector);

	await originElement.hover();
	await this.page.mouse.down();
	const box = (await destinationElement.boundingBox())!;
	await this.page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
	await destinationElement.hover();
	await this.page.mouse.up();
}

or this more standalone

async dragDrop(page: Page, originSelector: string, destinationSelector: string) {
	const originElement = await page.waitForSelector(originSelector);
	const destinationElement = await page.waitForSelector(destinationSelector);

	await originElement.hover();
	await page.mouse.down();
	const box = (await destinationElement.boundingBox())!;
	await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
	await destinationElement.hover();
	await page.mouse.up();
}

---

For reference in 1.13.0 we have page.dragAndDrop() https://github.com/microsoft/playwright/releases/tag/v1.13.0 https://playwright.dev/docs/next/api/class-page/#page-drag-and-drop

[lind-eduard]

Want to bring this topic up…Are there any progress on this?