HTML Drag and Drop, Including File Drag and Drop
The HTML APIs enable many kinds of drag and drop interactions such as dragging and dropping text, or links, or HTML, or files, or images, or nodes, or even custom data.
The HTML Drag and Drop API supports many kinds of drag and drop. See "Recommended Drag Types" on MDN.
Web browsers use the same general API, the HTML Drag and Drop API, for dragging files onto a web page that they use to drag HTML elements in a web page, but they use different parts of the API. The living standard is here on whatwg.org, updated in April, 2021.
The Zen live DOM editor demo responds to file dragging and dropping, but crashes because it receives input that causes an unhandled exception, which can be seen if the browser's JavaScript console is opened.
Demo #4 on web-call.cc, a so-called "financial blog," has cleaner, simpler code to manage a drag and drop operation, but it is still buggy and it is not meant to handle file drag and drop. If one of the draggable elements is dragged and dropped outside the drop zone, the operation is cancelled and cannot be rebegun.
Note: drag and drop can be programmed without the special HTML Drag and Drop API, using just mouse events. There can, in some cases, be a good reason for this. See the article "Drag'n'Drop with mouse events" on javascript.info.
Here is a list of basic HTML Drag and Drop API tutorials and how-tos:
"Using the HTML5 Drag and Drop API" on web.dev.
"Creating a Parking Game With the HTML Drag and Drop API" on css-tricks.com.
"Accessible Drag and Drop with Multiple Items" on sitepoint.com.
The old article "The HTML5 drag and drop disaster" on quirksmode.org explains many tricky points of the API.
Here is a version of drag and drop that doesn't use the HTML Drag and Drop API, on quirksmode.org.
The very old article "Beneath The Surface" on ln.hixie.ch explains many stumbling blocks to interpreting the API.
The old article "On HTML5 Drag and Drop" on tolmasky.com introduces the HTML Drag and Drop API with an emphasis on how the API extends drag operations to the computer's native drag system and clipboard, thus allowing the user to share data between different web apps and even other desktop apps.
The article "The Ultimate Guide to Drag and Drop Image Uploading with Pure JavaScript" looks like it might be a pretty good tutorial for various kinds of image handling in drag and drop interactions.
There is a polyfill for mobile drag and drop.
Last updated