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.

Reset Items

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

Clear Files

Sortable List

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

Reset Order

• ☰1Learn HTML5 Drag and Drop
• ☰2Build interactive interfaces
• ☰3Implement file uploads
• ☰4Create sortable lists
• ☰5Master drag events

API Support

Event Log

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