↑
Main Page

Using all drag-and-drop events

oTextbox.value += oEvent.type + “\n”;

}

</script>

</head>

<body>

<form>

<p>Try dragging the text from the left textbox to the right one.</p>

<input type=”text” ondragenter=”handleDragDropEvent(event)”

ondragover=”handleDragDropEvent(event)”

ondragleave=”handleDragDropEvent(event)”

ondrop=”handleDragDropEvent(event)” /></p>

<p><textarea rows=”10” cols=”25” readonly=”readonly”

id=”txt1”></textarea></p>

</form>

</body>

</html>

The previous example provides two text boxes to work with the events and one to announce the events

as they occur. When you drag the text from the text box on the left to the one on the right, the

fills up with events as they fire. If you drag the text over the text box and then drag it

back out, you see events like this:

dragenter

dragover

dragleave

Otherwise, if you drop the text into the second text box, you see something like this:

dragenter

dragover

drop

Note that when you drop the text into the second text box, the highlighted text actually moves into it.

Using all drag-and-drop events

The tricky part of handling system drag and drop is understanding the relationship between the dragged

item events and the drop target events. Generally speaking, the dragged item events always fire first,

except in the case of the

drop

event, which fires before

dragend

. The following example allows you to

explore the relationship between these sets of events:

<html>

<head>

<title>System Drag And Drop Example</title>

390

Chapter 13

16_579088 ch13.qxd 3/28/05 11:40 AM Page 390