Draggable

Drag a box around. One box moves freely, one is locked to the horizontal axis and one stays inside its container. Built with mouse events, so Actions and page.mouse both work.

Drag me anywhere

Horizontal only

Stay inside the box

Practice tasks

Drag the first box 150 px right and 60 px down, then assert its new position in the output.
Drag the horizontal box downwards and assert its top value did not change.
Try to drag the third box outside the grey area and assert it stays inside.
Assert the position output updates while you drag.

Sample automation code

Actions actions = new Actions(driver);
WebElement box = driver.findElement(By.id("drag-free"));
actions.dragAndDropBy(box, 150, 60).perform();

String pos = driver.findElement(By.id("drag-position")).getText();
Assert.assertTrue(pos.contains("drag-free"));

const box = page.getByTestId('drag-free');
const b = await box.boundingBox();
await page.mouse.move(b.x + b.width / 2, b.y + b.height / 2);
await page.mouse.down();
await page.mouse.move(b.x + b.width / 2 + 150, b.y + b.height / 2 + 60, { steps: 10 });
await page.mouse.up();
await expect(page.getByTestId('drag-position')).toContainText('drag-free');