HTML and CSS Reference
Now we're in the position where Firefox, Safari, Chrome, and
IE support this API. It's not a good API—in fact, it's probably
the worst API—but it's got some implementations so it's worth
understanding what it's capable of.
Throughout this chapter, you'll be forgiven for crying out “WTF?”
as we wind our way through rabbit's warren that is the drag and
drop API. Why are we even including a chapter on this topic?
It's because there is some interesting functionality that can be
achieved from the API. The API, as the name implies, allows
you to drag items and drop them anywhere in the browser. But
this functionality is not limited to the browser. You can drag ele-
ments from the browser to external applications—like another
browser window, or Photoshop, or a text editor—and the appli-
cation can prepare the dragged data so that it's compatible
with the drop target. This lends itself very well to the idea that
HMTL5 is a Web Applications spec, and is giving us developers
more functionality that borrows from desktop computing.
NOTE Details of Ian's
investigation can be seen
We're going to start with the absolute minimum required to
achieve the wonder that is dragging and dropping. By default,
all links, text nodes (or selections of), and image elements are
draggable. This means that you don't have to do anything to tell
the browser they can be dragged around the page.
Our simple demo will have a drop zone and a couple of images
that you can drag into the drop zone. And when you drop them,
the image source will appear in the drop zone (see Figure 8.1 ).
FIGURE 8.1 All images and
links are draggable by default.
With a little more code, you can
make them droppable too.