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.
Last updated
Was this helpful?
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.
Last updated
Was this helpful?
The HTML Drag and Drop API supports many kinds of drag and drop. See on MDN.
Web browsers use the same general API, , for dragging files onto a web page that they use to drag HTML elements in a web page, but they use . The , updated in April, 2021.
The 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.
on , 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 , using just mouse events. There can, in some cases, be a good reason for this. See the article on .
Here is a list of basic HTML Drag and Drop API tutorials and how-tos:
on web.dev.
on css-tricks.com.
on sitepoint.com.
The old article on quirksmode.org explains many tricky points of the API.
Here is that doesn't use the HTML Drag and Drop API, on quirksmode.org.
The very old article on ln.hixie.ch explains many stumbling blocks to interpreting the API.
The old article 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 looks like it might be a pretty good tutorial for various kinds of image handling in drag and drop interactions.
There is .