Drag Drop Api

 from Red Blob Games
6 Mar 2023

I wanted to try the HTML5 Drag and Drop API[1]. Try dragging an inventory icon to another slot to swap the two items:

Notes:

  1. This API supports dragging data outside the browser. For example you can attach text, images, urls, html, or other data to be dragged into other applications[2].
  2. This API also allows dragging data from outside the browser onto the web page.
  3. I couldn't get this API to work on SVG objects.
  4. The event.dataTransfer.dropEffect API was inconsistent between Mac/Chrome and Mac/Firefox, and I didn't spend the time to figure out the spec says.
  5. Mac/Chrome and Mac/Firefox generated the "ghost" image differently. Mac/Chrome didn't include the background, whereas Mac/Firefox did.
  6. quirksmode has a rant about how bad this API is[3].

I'm glad I tried this but I don't see myself using this API for much on my pages. Being able to drag in and out of the page itself seems to be the main reason for the complexity.

Source: drag-drop-api.js

Email me , or tweet @redblobgames, or comment:

Endnotes

  1. [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
  2. [2]: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types
  3. [3]: https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html