HTML and CSS Reference
In-Depth Information
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 real-world implementations, so it's
worth understanding what it's capable of.
Throughout this chapter, you'll be forgiven for exclaiming “WTF?”
as we wind our way through the rabbit's warren that is the drag-
and-drop API and look at some of the interesting functionality that
it can bring to your applications. This API, as its 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
elements from the browser to external applications—like another
browser window, or Photoshop, or a text editor—and the applica-
tion 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 function-
ality that borrows from desktop computing.
Let's start with the absolute minimum required to achieve the
wonder that is dragging and dropping. By default, all links, text
nodes (or selections of text), and image elements are drag-
gable. This means that you don't have to do anything to tell the
browser that these things 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 (
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.
