HTML and CSS Reference
In-Depth Information
Summary
In this chapter I explained all of the events that are raised as part of the DnD API and which elements they are
raised on. The source element receives the following events:
dragstart
- when the element is selected and the mouse is moved
•
drag
- called continuously while the mouse is moved
•
dragend
- when the mouse button is released
•
The following events are raised on the target element:
dragenter
- when the mouse first enters the target's space
•
dragover
- continuously while the mouse is moved and over the target
•
dragleave
- when the mouse leaves the target's space
•
drop
- when the mouse button is released
The
dataTransfer
object is used to pass information about the source element. This is provided in all of
the event handlers. It is used especially by the
drop
event handler to perform the necessary processing. This also
enables dragging across applications.
The
dragover
event handler sets the
dropEffect
, which controls the cursor that is used. Setting this to
“None” will cause the “not allowed” cursor to be used, signaling that the source cannot be dropped there.
To provide some visual feedback, the
dragstart
and
dragend
event handlers should modify the source
element to indicate that it is selected and being dragged. Likewise, the
dragenter
and
dragleave
event handers
should highlight the target element. This will provide an easy way for the user to see where the selected element
will be dropped.
The sample application that you created implemented some complex rules for determining which elements
could be dragged and where they could be dropped.
•
