JavaScript Examples Bible - UserWorks Technologies

onDblClick
Chapter 1 ✦ Generic HTML Element Objects (Chapter 15)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓ ✓ ✓
Example
See Listing 15-35 (for the onClick event handler) to see the onDblClick event in
action.
onDrag
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓
Example
Listing 15-37 shows several drag-related event handlers in action. The page
resembles the example in Listing 15-36, but the scripting behind the page is quite
different. In this example, the user is encouraged to select individual words from
the Nouns and Adjectives columns and drag them to the blanks of the sentence. To
beef up the demonstration, Listing 15-37 shows you how to pass the equivalent of
array data from a drag source to a drag target. At the same time, the user has a
fixed amount of time (two seconds) to complete each drag operation.
The onDragStart and onDrag event handlers are placed in the tag
because those events bubble up from any element that the user tries to drag. The
scripts invoked by these event handlers filter the events so that the desired action
is triggered only by the “hot” elements inside the table. This approach to event handlers
prevents you from having to duplicate event handlers (or IE
tags) for each table cell.
The onDragStart event handler invokes setupDrag(). This function cancels the
onDragStart event except when the target element (in other words, the one about
to be dragged) is one of the TD elements inside the table. To make this application
smarter about what kind of word is dragged to which blank, it passes not only the
word’s text, but also some extra information about the word. This lets another event
handler verify that a noun has been dragged to the first blank, while an adjective has
been dragged to the second blank. To help with this effort, class names are assigned
to the TD elements to distinguish the words from the Nouns column from the words
of the Adjectives column. The setupDrag() function generates an array consisting of
the innerText of the event’s source element plus the element’s class name. But the
event.dataTransfer object cannot store array data types, so the Array.join()
method converts the array to a string with a colon separating the entries. This string,
then, is stuffed into the event.dataTransfer object. The object is instructed to render
the cursor display during the drag-and-drop operation so that when the cursor is
103
elementObject.onDrag