↑
Main Page

drop target

function handleDragDropEvent(oEvent) {

var oTextbox = document.getElementById(“txt1”);

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

}

</script>

</head>

<body>

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

<form>

<p><input type=”text” value=”drag this text”

ondragstart=”handleDragDropEvent(event)”

ondrag=”handleDragDropEvent(event)”

ondragend=”handleDragDropEvent(event)” />

<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>

As you can tell, this example combines the functionality of the previous two examples, monitoring both

the dragged item events and the drop target events. When you drag text into the right text box from the

left, you see an event listing like this:

dragstart

drag

dragenter

drag

dragover

drag

dragover

drag

drop

dragend

Note that because you start dragging away from the drop target, only the dragged item events fire ini-

tially. When you drag the text over the drop target, the

dragenter

event fires, followed by

drag

and

then

dragover

. These two events fires repeatedly while you are still dragging over the drop target.

When you drop onto the target, the

drop

event fires and is immediately followed by

dragend

. This com-

pletes the drag and drop sequence.

If you don’t drop onto the target, you see a series of events more like this:

dragstart

drag

dragenter

391

Drag and Drop

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