Drag and Drop Testing Page

Various drag and drop scenarios for testing drag functionality

Drag Between Containers

Drag items from one container to another

Container A

Apple

Banana

Cherry

Date

Container B

Elderberry

Fig

Sortable List

Drag items to reorder them within the list

☰First Task

☰Second Task

☰Third Task

☰Fourth Task

☰Fifth Task

Kanban Board

Drag tasks between columns to change their status

To Do (3)

Design mockups

Write tests

Review PR

In Progress (2)

Build API

Setup CI/CD

Done (1)

Project setup

File Drop Zone

Drag and drop files from your computer

📁

Drag and drop files here

Files will be listed below

Grid Drag (Swap)

Drag tiles to swap their positions

Drag with Handles

Items can only be dragged by their handle (grip icon)

☰

Item with drag handle 1

☰

Item with drag handle 2

☰

Item with drag handle 3

Mixed Draggable States

Some items are draggable, others are not

✓ Draggable item 1

✗ Disabled item (not draggable)

✓ Draggable item 2

✗ Another disabled item

✓ Draggable item 3

Nested Drop Zones

Drop zones inside other drop zones

Outer drop zone

Inner zone 1

Inner zone 2

Draggable Images/Cards

Drag image cards around

🌅

Mountains

🌊

Beach

🌳

Forest

🌃

City