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
 
 
Search WWH ::




Custom Search