HTML and CSS Reference
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.