Web Development with jQuery

Chapter 11HTML5 Drag and Drop

In this chapter you learn how to use the HTML5 drag-and-drop specification with jQuery. The HTML5 drag-and-drop specification gives you a more powerful drag-and-drop implementation 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 specification enables you to drag and drop between multiple browser windows, and even multiple browser windows between completely different browsers. For example, you can initiate 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 file manager. You can drag files 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 specification, 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 following 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. ...