Drag and Drop in Internet Explorer - WebReference.com (1/3)
Drag and Drop In Internet Explorer
By Nicholas C. Zakas (firstname.lastname@example.org).
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
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 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
element to handle all events.
This event is the very first to fire. The
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
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 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
event for the dragged object.
The next event in the firing sequence is
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
Right after the
ondragover begins firing.
is fired repeatedly while the object is being dragged. However, unlike
ondragover is fired on the drop target.
fire at the same time on different objects.
If the user doesn't drop the object onto the drop target and
instead moves the cursor outside of it, the
event fires. This event is very similar to
and fires on the drop target.
When the user drops the object, regardless of whether it is
dropped on the drop target or not, the
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.
The final event is the
event. As you may have guessed, this event fires when the object is dropped on
the drop target. When this happens, the
event fires before the
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
ondragenter by setting
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
ondragenter events. In this example, the
element is made into a drop target. This same technique can be used on any
other HTML element as well.
Created: October 23, 2002
Revised: October 23, 2002