(^280) ❘ CHAPTER 11 HTML5 DRAG AND DROP
The merits of Koch’s rant can be debated, but the frustration he expresses in learning how to use the
drag-and-drop API is a common experience. What you learn in this chapter, hopefully, can signifi -
cantly mitigate the frustration typically experienced when working with the drag-and-drop API for
the fi rst time.
The drag-and-drop API works in all modern browsers, and even some of the older ones with the
addition of a line or two of legacy-enabling code. The drag-and-drop API originated in IE5. The
modern API is a slight modifi cation of the original IE5 API. The API was spec’d out by the Web
Hypertext Application Technology Working Group (WHATWG) and later adopted as part of the
formal W3C HTML5 specifi cation, when the W3C took over HTML5 from the WHATWG. The IE
API was adopted with some tweaks so that existing code already in use could be used without
much diffi culty.
Following are the drag-and-drop JavaScript events:
➤ (^) dragstart—This event is fi red when a drag begins, on the element the drag was initiated on.
➤ (^) dragend—This event is fi red when a drag ends, on the element that the drag was initiated on.
➤ (^) dragenter—This event is fi red when an element enters the space over the element this event is
attached to; it is used to identify an appropriate drop zone for the drag element.
➤ (^) dragleave—This event is fi red when an element leaves the space over the element this event is
attached to; it is also used to identify an appropriate drop zone for the drag element.
➤ (^) dragover—This event is fi red continuously while a draggable element is within the space over
the element this event is attached to; this event is also used on the drop side.
➤ (^) drag—This event is fi red continuously while the element is dragged, on the element being
dragged.
➤ (^) drop—This event is fi red when a draggable element is dropped on the element this event is
attached to.
You need to implement event listeners for most of these events to implement drag and drop in a
document. The following example implements the drag-and-drop API in a browser-based Mac OS
Finder inspired fi le manager. Remember, you can download this book’s source code for free from
http://www.wrox.com/go/webdevwithjquery. This example is Example 11-1.html.
<!DOCTYPE HTML>
[http://www.it-ebooks.info](http://www.it-ebooks.info)