IconVault logoIconVault
Sign in

Drag & Drop - Interactive Lab | IconVault

Master HTML5 drag and drop: sortable list, file drop with previews, effectAllowed and a live DataTransfer inspector. Free, in your browser.

All tools

Drag & Drop

DataTransfer, file drop and sortable lists

5 of 5 free uses left

Sortable list

  • 1.Alpha
  • 2.Bravo
  • 3.Charlie
  • 4.Delta
  • 5.Echo
  • 6.Foxtrot

effectAllowed

Try "none": the drop is refused and the browser shows the forbidden cursor.

Drop files here

Files stay on your device, names and previews only

5 of 5 free drops left.

Dropped files (0)

Drop files on the zone to inspect their DataTransfer payload.

DataTransfer event inspector

Drag the list items or files above: every drag event lands here with its live DataTransfer state.

Notice that types only lists Files during file drags, and that dropEffect follows the cursor position while effectAllowed is set by the drag source.

About this tool

IconVault's Drag & Drop playground is a hands-on lab for the real HTML5 drag and drop API: reorder a sortable list, drop files to inspect their payload with live previews, switch `effectAllowed` to see the forbidden cursor in action, and watch every drag event land in a DataTransfer inspector with its live types, dropEffect and file list. It is free and runs fully in your browser.

You will learn the event sequence (dragstart, dragover, drop, dragend), why dragover must call preventDefault to allow a drop, how setData moves custom payloads between dragstart and drop, and what the types array actually contains during file drags versus element drags. Dropped files never leave your device: only names, sizes and local previews are shown.

Frequently asked questions

Popular searches

html5 drag and dropdrag and drop javascriptdatatransferdragstart dragover drophtml drag drop tutorialjavascript drag drop listsortable list javascriptdrag and drop file uploaddatatransfer.fileseffectalloweddropeffectsetdata getdatadrag drop event orderpreventdefault dragoverhtml5 dnd exampledraggable attributedrag and drop inspectordatatransfer typesdrag drop custom datafile drop zone javascriptdrag drop preview imagehtml drag drop not workingdrop event not firingdragover preventdefault whydragend eventdragenter vs dragoverdrag drop touch devicesmobile drag and drop alternativepointer events dragnative drag and drop vs libraryreact drag and dropvue drag dropdatatransfer setdragimagecustom drag imagedrag drop accessibilitykeyboard reorder listmdn drag and droptest drag drop onlinedrag drop playgroundlearn drag and drop apifile api drag dropobject url previewdrop multiple filesdrag drop effect nonecopy vs move dragdrag data formatsapplication/x custom typedrag drop securitycross window drag dropdrag files into browserdnd api browser support

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →