HTML5 Drag and Drop API Demo

The HTML5 Drag and Drop API enables drag-and-drop functionality for web applications, supporting both element dragging and file drops.

Drag and Drop API: checking...

Statistics

0
Drag Operations
0
Successful Drops
0
Files Dropped
0
Sort Operations

Drag Items to Categories

Drag the food items on the left and drop them into the correct category zones.

Apple
Carrot
Cheese
Steak
Banana
Broccoli
Milk
Chicken
Fruits
Drop fruits here
Vegetables
Drop vegetables here
Dairy
Drop dairy here
Meat
Drop meat here

File Drop Zone

Drag and drop files from your computer into the zone below.

📁
Drag files here or click to select

Sortable List

Drag items to reorder the list. The rank numbers will update automatically.

API Support

Event Log

Drag and drop events will be logged here... Try dragging items between zones or dropping files.