Loading challenge...
Drag and Drop
Drag elements between containers
Basic Drag and Drop
Drag items from the source to the target area
Draggable Items
Item 1
Item 2
Item 3
Item 4
Drop Zone
Drop items here
Sortable List
Drag items to reorder them
≡First
≡Second
≡Third
≡Fourth
≡Fifth
Order: First, Second, Third, Fourth, Fifth
Testing Tips
Automation hints
- ✓ Use page.locator().dragTo() for simple drag-and-drop
- ✓ For complex scenarios use mouse.down(), mouse.move(), mouse.up()
- ✓ Verify element positions with boundingBox() after drag
- ✓ Test drop zones accept/reject logic with data-testid attributes
- ✓ Use steps option in dragTo() for smoother animations
Status
Current drag and drop state
Items remaining: 4
Items dropped: 0
Currently dragging: None
