HTML and CSS Reference
In-Depth Information
Figure 14-1.
The source and target elements
During a DnD operation, events are fired on both elements and I've indicated which events are raised
on each. On the source element, the
dragstart
,
drag
, and
dragend
events are comparable to the
mousedown
,
mousemove
and
mouseup
events in a windows application. When you click on an element and start to move the
mouse, the
dragstart
event is raised. This is immediately followed by the
drag
event and the
drag
event is also
repeatedly raised with each move of the mouse. Finally, the
dragend
event is raised when the mouse button
is released.
The events on the target element are a little more interesting. As the mouse is moved around the page,
when it enters the area defined by an element, the
dragenter
event is raised on that element. As the mouse
continues to move, the
dragover
event is raised on the target element. If the mouse moves outside of that
element, the
dragleave
event is fired on the target element. Presumably, the mouse is now on a different element
and a
dragenter
event is raised on that element. However, if the mouse button is released while over the target
element, instead of a
dragleave
event, the
drop
event will be raised.
Now let's walk through a typical scenario and see the order of these events. This is illustrated in Table
14-1
.
Table 14-1.
Sequence of events
Element
Event
Notes
dragstart
Source
Raised when the mouse is clicked and starts to move
drag
Source
Raised with each mouse move
dragenter
Target
Raised when the mouse enters the target element's space
dragover
Target
Raised with each mouse move when the pointer is over the target
drag
Source
This event continues to be raised as the mouse moves
dragleave
Target
Raised when the mouse is moved past the current target
dragenter
Target
Raised when mouse moves to a new target element
drop
Target
Raised when the mouse button is released
dragend
Source
Ends the drag and drop operation