Drag and Drop in Internet Explorer - WebReference.com (1/3)

Drag and Drop In Internet Explorer

By Nicholas C. Zakas ([email protected]).

In Internet Explorer version 5.0, Microsoft introduced built-in functionality to extend drag and drop behavior. This behavior comes in the form of events that make dragging and dropping much easier to script.

Images and text selections automatically begin drag operations when the user pushes the left mouse button and beings moving the cursor. While IE 4.0 only allowed textboxes to be drop targets (they still are default drop targets), IE 5.0 introduced the ability to make nearly anything into a drop target.

In IE 5.5 for Windows only, Microsoft went one step further and added the dragDrop() method.

In this article, we will explore how to bring drag and drop to life in IE 5.0 and higher. Additionally, we will learn how to overcome the limitation that allows only text or images to be dragged.

The Events

The first thing to understand in the IE drag and drop scheme is the event system that is built around it. In all, 7 events are available for our usage and fire either on the dragged object or on the drop target. Because these events all bubble, you can assign event handlers to the <body> element to handle all events.

ondragstart

This event is the very first to fire. The ondragstart event fires when the user pushes the left mouse button and begins to move the mouse while over either a text selection or image. This initiates the drag and changes the mouse cursor to "no-drop" (the circle with a line through it) because you can't drop something on itself. It is in ondragstart that we must save the information that will be needed by the drop target (more on this later). It is also important to note that this event fires on the object being dragged.

ondrag

Immediately after ondragstart fires, the ondrag event fires. This event also fires on the dragged object and is fired repeatedly while the object is being dragged. This can be thought of as similar to the onmousemove event for the dragged object.

ondragenter

The next event in the firing sequence is ondragenter. The ondragenter event fires when the user drags an object over a valid drop target. This event fires on the drop target and is akin to the onmouseover event.

ondragover

Right after the ondragenter event, ondragover begins firing. Just like ondrag, ondragover is fired repeatedly while the object is being dragged. However, unlike ondrag, ondragover is fired on the drop target. In essence, ondrag and ondragover fire at the same time on different objects.

ondragleave

If the user doesn't drop the object onto the drop target and instead moves the cursor outside of it, the ondragleave event fires. This event is very similar to onmouseout and fires on the drop target.

ondragend

When the user drops the object, regardless of whether it is dropped on the drop target or not, the ondragend event fires. This signifies that the drag operation has ended and all events and behaviors return to normal. This event fires on the dragged object.

ondrop

The final event is the ondrop event. As you may have guessed, this event fires when the object is dropped on the drop target. When this happens, the ondrop event fires before the ondragend event. This event fires on the drop target, but unlike the other events, this event will only fire on a textbox by default. In order to enable this event on other elements, you must cancel the default behavior for both ondragover and ondragenter by setting event.returnValue to false.

Events Example

MSDN has an excellent example that shows exactly when each of these events fires during a drag process. Try dragging the text from one box and dropping it into another. You will see the listbox fill up with the events that occur along the way.

Creating Your Own Drop Target

I have created a basic example of how to create your own drop target by canceling the ondragover and ondragenter events. In this example, the <div> element is made into a drop target. This same technique can be used on any other HTML element as well.

[next]

Created: October 23, 2002
Revised: October 23, 2002

URL: https://webreference.com/programming/javascript/dragdropie/