JavaScript Examples Bible - UserWorks Technologies

104
JavaScript Examples Bible: The Essential Companion to JavaScript Bible
elementObject.onDrag
atop a drop target, the cursor is the “copy” style. Figure 1-4 shows the cursor effect
as the user drags a selected word from the columns to a blank field that is scripted as
a drop target. Finally, the setupDrag() function is the first to execute in the drag
operation, so a timer is set to the current clock time to time the drag operation.
Figure 1-4: The cursor turns to a “copy” icon atop a designated drop target
The onDrag event handler (in the BODY) captures the onDrag events that are
generated by whichever table cell element is the source element for the action.
Each time the event fires (which is a lot during the action), the timeIt() function
is invoked to compare the current time against the reference time (global timer)
set when the drag starts. If the time exceeds two seconds (2,000 milliseconds), an
alert dialog box notifies the user. To close the alert dialog box, the user must
unclick the mouse button to end the drag operation.
To turn the blank SPAN elements into drop targets, their onDragEnter,
onDragOver, and onDrop event handlers must set event.returnValue to false;
also, the event.dataTransfer.dropEffect property should be set to the desired
effect (copy in this case). These event handlers are placed in the P element that
contains the two SPAN elements, again for simplicity. Notice, however, that the
cancelDefault() functions do their work only if the target element is one of the
SPAN elements whose ID begins with “blank.”
As the user releases the mouse button, the onDrop event handler invokes the
handleDrop() function. This function retrieves the string data from event.
dataTransfer and restores it to an array data type (using the String.split()
method). A little bit of testing makes sure that the word type (“noun” or “adjective”)
is associated with the desired blank. If so, the source element’s text is set to
the drop target’s innerText property; otherwise, an error message is assembled to
help the user know what went wrong.