Drag-and-Drop Interactions

This page demonstrates 10 advanced drag-and-drop scenarios for robust automation and accessibility testing.

1. List Reordering

Item 1
Item 2
Item 3
Item 4
Item 5

(Drag items to change their order. Keyboard focusable for accessibility.)

2. Move Items Between Lists

List A

List A Item 1
List A Item 2
List A Item 3

List B

List B Item 1
List B Item 2
List B Item 3

(Drag items between lists. Keyboard focusable for accessibility.)

3. Grid/Card Layout

5. Drag-and-Drop Grid

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

Cell 7

Cell 8

Cell 9

(Drag cells to reorder the grid. Keyboard focusable for accessibility.)

4. Drag-to-Delete

4. Drag to Delete

Deletable item 1
Deletable item 2
Deletable item 3
Deletable item 4

🗑️ Trash Bin

(Drag items to the trash bin to delete them.)

5. File Upload

3. Drag-and-Drop File Upload

Drag files here or click to select

(Drag files from your desktop to upload. Keyboard focusable for accessibility.)

6. Keyboard Accessible Drag-and-Drop

Keyboard item 1
Keyboard item 2
Keyboard item 3

(Use Tab to focus, Space/Enter to pick up/drop, Arrow keys to move.)

7. Drop Zones with Highlight

Item A

Item B

Zone 1

Zone 2

(Drop an item into a zone. The last dropped zone highlights.)

8. Async Drop with Loading/Error

Async item 1

Async item 2

Drop Here

(Drop items into the zone. Simulates async API with loading and error.)

9. Nested Drag-and-Drop (Groups)

Group 1

Nested item 1-1
Nested item 1-2

Group 2

Nested item 2-1
Nested item 2-2

(Drag items between groups. Nested drag-and-drop pattern.)

10. Kanban Board (Multi-Column Drag-and-Drop)

To Do

Task 1
Task 2

In Progress

Task 3

Done

Task 4

(Drag tasks between columns. Kanban board pattern.)