↑
Main Page

Drag-and-drop events

In Internet Explorer version 4.0, only two items on a Web page could initiate a system drag: an image or

some text. When dragging an image, you just simply held the mouse button down and then moved it;

with text, you first highlighted some text and then you could drag it the same way as you would drag an

image. In IE 4.0, the only valid drop target was a text box.

In version 5.0, Internet Explorer extended its drag-and-drop capabilities by adding new events and

allowing nearly anything on a Web page to become a drop target. Version 5.5 went a little bit further

by allowing nearly anything to become draggable (IE 6.0 supports this functionality as well).

Drag-and-drop events

The drag-and-drop events Microsoft added to Internet Explorer enable you to control nearly every

aspect of a system drag-and-drop operation. The tricky part is determining where each event is fired:

Some fire on the dragged item; others fire on the drop target.

Dragged item events

When an item is dragged, the following events fire (in this order):

dragstart

drag

dragend

At the moment you hold a mouse button down and begin to move the mouse, the

dragstart

event

fires on the item that is being dragged. By default, this event fires on an image or text selection being

dragged. The cursor changes to the

no-drop

symbol (a circle with a line through it) indicating that the

item cannot be dropped on itself. You can use the

ondragstart

event handler to run JavaScript code as

the dragging begins.

After the

dragstart

event fires, the

drag

event fires and continues firing so long as the object is being

dragged. You can think of this event as similar to

mousemove

(which also fires repeatedly as the mouse is

moved). When the dragging stops (because you drop the item onto either a valid or invalid drop target)

the

dragend

event fires.

The following example shows how to use the

ondragstart

ondrag

, and

ondragend

event handlers:

<html>

<head>

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

function handleDragDropEvent(oEvent) {

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

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

The system drag-and-drop functionality discussed in this section pertains to

Internet Explorer for Windows only; the Macintosh version of IE never developed

the drag-and-drop functionality to this extent because of its separation from the

operating system.

388

Chapter 13

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