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):
At the moment you hold a mouse button down and begin to move the mouse, the
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
symbol (a circle with a line through it) indicating that the
item cannot be dropped on itself. You can use the
event handler to run JavaScript code as
the dragging begins.
After the
event fires, the
event fires and continues firing so long as the object is being
dragged. You can think of this event as similar to
(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)
event fires.
The following example shows how to use the
, and
event handlers:
<title>System Drag And Drop Example</title>
<script type=”text/javascript”>
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.
Chapter 13
16_579088 ch13.qxd 3/28/05 11:40 AM Page 388

JavaScript EditorFree JavaScript Editor     Ajax Editor