Droppable

Drag the source onto the target. One target accepts anything, one only accepts the box marked acceptable, and one sends the item back if you drop it in the wrong place.

Acceptable

Not acceptable

Accepts anything

Accepts only "Acceptable"

Practice tasks

Drag Acceptable onto the first target and assert the target text changes to Dropped.
Drag Not acceptable onto the restricted target and assert it is rejected.
Drag Acceptable onto the restricted target and assert it is accepted.
Click Reset and assert both targets go back to their original text.
Assert the result log records each drop attempt.

Sample automation code

Actions actions = new Actions(driver);
actions.dragAndDrop(
    driver.findElement(By.id("drag-acceptable")),
    driver.findElement(By.id("drop-any"))).perform();

Assert.assertTrue(driver.findElement(By.id("drop-any")).getText().contains("Dropped"));

await page.getByTestId('drag-acceptable').dragTo(page.getByTestId('drop-any'));
await expect(page.getByTestId('drop-any')).toContainText('Dropped');

await page.getByTestId('drag-not-acceptable').dragTo(page.getByTestId('drop-restricted'));
await expect(page.getByTestId('drop-result')).toContainText('rejected');