↑
Main Page

Drop Target Events

}

</script>

</head>

<body>

<form>

<p>Try dragging the image.</p>

<p><img src=”images/smiley.gif” alt=””

ondragstart=”handleDragDropEvent(event)”

ondrag=”handleDragDropEvent(event)”

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

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

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

</form>

</body>

</html>

This example assigns

ondragstart

ondrag

, and

ondragend

event handlers to an image. When you

drag the image, the following text box displays the events each time one occurs. You end up seeing

something like this in the text box:

dragstart

drag

dragend

Play around with this example for a while until you get the hang of these events.

Drop Target Events

When an item is dragged over a valid drop target, the

dragenter

event (similar to the

mouseover

event) fires. Immediately after the

dragenter

event fires, the

dragover

event fires and continues to fire

as the item is being dragged within the boundaries of the drop target. When the item is dragged outside

of the drop target,

dragover

stops firing and the

dragleave

event is fired (similar to

mouseout

). If the

dragged item is actually dropped on the target, the

drop

event fires instead of

dragleave

This example explores the drop target events:

<html>

<head>

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

function handleDragDropEvent(oEvent) {

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

On any browsers other than IE on Windows, the event handlers in the previous

example are ignored. Keep this in mind if you plan on implementing a system drag-

and-drop solution.

389

Drag and Drop

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