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.

I'm glad I tried this but I don't see myself using this API for much on my pages.

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