HTML and CSS Reference
In-Depth Information
Figure 10-2. Showing the results of dragging the yellow box into the blue box
Discussion
The native HTML5 drag-and-drop API is both useful and quite complex. As you can
see from the previous code snippets, it doesn't require an entire complex library to
enable D&D on your site, but it's not particularly trivial either. With that complexity,
though, comes lots of flexibility.
The first and most obvious thing you'll notice when attempting to run the above code
yourself (it's not entirely obvious just from the screenshots) is that the yellow box itself
doesn't move while you are holding down the mouse button and moving the mouse.
Different browsers render this experience slightly differently, but in general, the yellow
box stays put during the drag; what shows is a different icon for the mouse cursor, to
let the user know that a D&D event is in progress.
It may seem a bit counterintuitive that dragging an element doesn't actually move the
element itself. You might expect it to work the same as if you drag a window around
on your desktop—the window tracks along directly under the mouse cursor as you
move.
On the other hand, if you drag an icon around on the Windows OS desktop, the icon
doesn't move with the mouse—it only moves once you let go of the mouse button and
stop the drag (this is the drop). This latter experience is more closely aligned with how
native D&D works in HTML5.
