HTML and CSS Reference
In-Depth Information
tions for as long as graphical UIs have been around. As a result, users have come to expect
to be able to drag objects around applications and are sometimes shocked to learn that their
favorite web applications can't do it.
Attempts at implementing drag and drop in the browser began in the late 1990s, with Nets-
cape 4.0 providing a basic implementation and Microsoft following up with a more com-
plete offering in IE 5.0. At the time, it was seen as a nonstandard, browser-specific exten-
sion to IE, but over time other browser vendors adopted the same API, leading to its even-
tual inclusion in HTML5.
The great news is that HTML5 drag and drop is supported on all modern browsers, includ-
ing IE from version 5.0 up. The bad news is that the original Microsoft implementation
used is, quite frankly, terrible. Ian Hickson, the editor of the HTML5 specification, once
tweeted, “The drag-and-drop API is horrible, but it has one thing going for it: IE6 imple-
ments it, as do Safari and Firefox.”
To use drag and drop in HTML5, you can use the
draggable
attribute on an element to
explicitly define that element as draggable. (Many elements, such as images, are draggable
by default.) You can then use a series of events to listen for changes as the user drags the
element into and out of other elements and indeed when the user drops the element. The
API allows you to set the data you want to associate with the drag operation and then to
read this back when dropped.
A new feature of HTML5 drag and drop is the ability to drag files from your computer and
drop them into a web application. An example of this functionality can be seen in Gmail,
as shown in
figure 1.9
.
