HTML and CSS Reference
In-Depth Information
Consider that native D&D is designed so you can drag all sorts of different things, not
all of which have visual representations like our yellow box does. As such, native D&D
does not necessarily imply actually visually moving any element on the page. Instead,
D&D is about dragging a reference from one object to another and connecting the two
in a D&D event, whereby you can then decide what that connection means and how
to respond.
The events associated with native D&D are:
dragstart
Called when the “draggable” element first starts being dragged
dragend
Called at the end of a drag event, successful or canceled
dragenter
Called on a target drop container when the drag first moves over the target
dragleave
Called when the drag moves off the target
dragover
Called continuously while the drag is over the target
drop
Called when the drag event is completed by dropping the element onto the target
drop container
Sometimes, you might just be copying invisible attributes from one element to another.
Other times, you might be initiating some action like deleting, by moving an element
onto a trash icon. In our example, we are repositioning the yellow box inside the blue
box, so once the D&D event finishes, we actually move the yellow box.
Since the yellow box is visible, it seems to make sense that we might want to move it
around as we drag (like when dragging a window). However, the typical JavaScript
approach to this does not work, because the
mousemove
event does not fire during a
D&D action. The global
drag
event does fire on the document, but cross-browser it
doesn't reliably have coordinates we can use to position the element.
If you need to actually move an element around during the drag, it's best not to use
native D&D... for now, anyway. Hopefully this shortcoming will be addressed even-
tually. Until then, use established patterns and/or libraries for emulating D&D with
mouse events.
Another very advanced usage of the native D&D functionality that is on the horizon is
the ability to drag items between windows, or between your browser and the desktop,
and vice versa. For instance, you can drag a file from your desktop and drop it onto a
target on a web page. You respond to the drop the same way as in the code snippets
above; the only difference is that you don't need an element on your page with the
draggable
attribute to be the thing that you dragged. For example:
