Understanding the Gravity of HTML5 - Learn HTML5 by Creating Fun Games - page 137

the user (on drag start), which we respond to by making the bowl lid image invisible
and placing a copy of the lid behind the mouse pointer, so that it appears that the
user is truly dragging that lid.
Next, we listened for the event that is triggered when the user finally releases the
mouse button, indicating the end of the dragging action (on drag end). At this point,
we simply restore the bowl lid back to where it was originally, on top of the bowl. This
event is fired whenever the dragging action is finished, and the drop was not done
inside a valid drop target (the user didn't drop the lid where it was expected), which
essentially restarts the process.
The three events that we listen for on the drop target are the onDragLeave ,
onDragOver , and onDrop . Whenever a draggable is dropped inside a drop target,
the target's onDrop event is fired. In this case, all we do is call the startGame()
function, which sets the game in motion. As part of the set up for this startGame
function, we move the bowl lid element into the exact pixel position where it was
dropped, and remove the draggable attribute, so that the user can no longer drag
that element.
The functions onDragOver and onDragLeave are triggered whenever the mouse
pointer is moved on top of, and hovered out of the target object, respectively. In our
case, all we do in each of those functions is toggle the visibility of the bowl lid and
the image that shows behind the cursor while the dragging is happening. This can
be seen in the following code:
//
------------------------------------------------------------
// Fired when draggable starts being dragged
(onDragStart)
//
------------------------------------------------------------
function doOnDragStart(event) {
if (bowlTop.isReady) {
event.target.style.opacity = 0.0;
event.dataTransfer.setDragImage(bowlTop,
100, 60);
}
}