↑
Main Page

Creating your own drop target

drag

dragover

drag

dragover

drag

dragleave

drag

dragend

In this case, you dragged the text over the right text box, and then dragged it back out, so the

dragleave

event fires, followed by the

drag

event. When you finally stop dragging the text, the

dragend

event fires.

By default, text boxes (

) are the only valid drop targets on a Web page,

although it is possible to create a drop target from any item by altering the behavior of the

dragover

and

dragenter

events.

Creating your own drop target

When you try to drag some text (or an image) over an invalid drop target, you see a special cursor (a cir-

cle with a line through it) indicating that you cannot drop. Even though all elements support the drop

target events, by default, their behavior is to not allow dropping. For example:

<html>

<head>

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

function handleDragDropEvent(oEvent) {

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

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

}

</script>

</head>

<body>

<p>Try dragging the text from the textbox to the red square.

No drop target events fire.</p>

<form>

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

ondragstart=”handleDragDropEvent(event)”

ondrag=”handleDragDropEvent(event)”

ondragend=”handleDragDropEvent(event)” />

<div style=”background-color: red; height: 100px; width: 100px”

ondragenter=”handleDragDropEvent(event)”

ondragover=”handleDragDropEvent(event)”

ondragleave=”handleDragDropEvent(event)”

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

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

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

</form>

</body>

</html>

392

Chapter 13

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