HTML5 Drag and Drop
In this chapter you learn how to use the HTML5 drag-and-drop specifi cation with jQuery.
The HTML5 drag-and-drop specifi cation gives you a more powerful drag-and-drop imple-
mentation than jQuery UI’s implementation in the Draggables and Droppables plugins, which
you work with in Chapter 12, “Draggable and Droppable.” The HTML5 drag-and-drop spec-
ifi cation enables you to drag and drop between multiple browser windows, and even
multiple browser windows between completely different browsers. For example, you can initi-
ate a drag in Safari and complete it in Chrome or Firefox. You can also use HTML5 drag and
drop to upload documents from your desktop or fi le manager. You can drag fi les from your
desktop, Finder, Windows Explorer, and such to a browser window, and there you can access
the document or documents uploaded through JavaScript and display thumbnails and upload
progress meters.jQuery has nothing built into it that assists with using the HTML5 drag-and-drop specifi ca-
tion, but you can use jQuery in an implementation of the HTML5 drag-and-drop API to
attach events and manipulate HTML attributes or CSS to enable drag and drop. In the follow-
ing section you learn more about how the drag-and-drop API came about and see an example
implementing it.Implementing Drag and Drop
HTML5 drag and drop can be summed up as mostly a collection of JavaScript events. There
are some additional CSS/HTML attributes that enable drag and drop depending on the
browser. The additional CSS/HTML portion is often criticized for the weird and divergent
methods the browser makers have chosen to make it possible to initiate drag and drop. One
such critique is an expletive-laden blog post by Peter-Paul Koch on his quirksmode.org site:
http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html.His rant sums up the problems with the HTML5 drag-and-drop API nicely; it basically boils
down to it’s a bit of a kludge because it was reverse-engineered and based on IE’s legacy imple-
mentation. And then, in addition, there is the Safari browser team’s diversion from the specifi -
cation with its addition of CSS to instigate drag-and-drop behavior. However, the Safari team
has since changed its implementation to match the offi cial HTML 5 specifi cation.