C H A P T E R 9

Working with Drag-and-Drop

Traditional drag-and-drop has been popular with users since the days of the original Apple Macintosh. But today’s computers and mobile devices have much more sophisticated drag-and-drop behavior. Drag-and-drop is used in file management, transferring data, diagramming, and many other operations where moving an object is more naturally envisioned with a gesture than a key command. Ask developers on the street what drag-and-drop encompasses, and you are likely to get a myriad of different answers depending on their favorite programs and current work assignments. Ask non-technical users about drag-and-drop, and they may stare at you blankly; the feature is now so ingrained into computing that it does not often get called out by name anymore.

And yet, HTML has not had drag-and-drop as a core feature in its many years of existence. Although some developers have used the built-in ability to handle low-level mouse events as a way to hack up primitive drag-and-drop, those efforts paled in comparison to the type of drag-and-drop features that have been available in desktop applications for decades. With the arrival of a well-specified set of drag- and-drop functionality, HTML applications have advanced one step closer to matching the capabilities of their desktop counterparts.

Web Drag-and-Drop: The Story So Far

You may have seen examples of drag-and-drop on the Web already and are wondering if these are uses of HTML5 drag-and-drop. The answer? Probably not.

The reason is that HTML and DOM have exposed low-level mouse events since the early days of DOM events, and that has been sufficient for creative developers to craft a rudimentary drag-and-drop capability. When coupled with CSS positioning, it is possible to approximate a drag-and-drop system through the creation of complex JavaScript libraries and a firm knowledge of DOM events.

For example, by handling the following DOM events, it is possible to move items around in a web page if you code a set of logical steps (and some caveats):

•mousedown: The user is starting some mouse operation. (Is it a drag or just a click?)

•mousemove: If the mouse is not up yet, a move operation is starting. (Is it a drag or a select?)

•mouseover: The mouse has moved over an element. (Is it one of the ones I want to drop on?)

•mouseout: The mouse has left an element that will no longer be a possible place to drop. (Do I need to draw feedback?)

•mouseup: The mouse has released, possibly triggering a drop operation. (Should the drop complete on this location based on where it started from?)

217