Drag and Drop in Internet Explorer - WebReference.com (2/3)
Drag and Drop in Internet Explorer
The dataTransfer Object
In addition to the events that IE 5.0 introduced, the
object also made its first appearance. The
object is relatively simple and exists solely to help drag and drop operations
transfer string data from the dragged object to the drop target.
setData() and getData()
event fires, the
dataTransfer object leaps
into existence as a property of
(it does not exist for any events other than those listed in this article). At
this point, we can use the
method to store one of two types of data: plain text or a URL. The syntax for
each is as follows:
window.event.dataTransfer.setData("text","some text"); window.event.dataTransfer.setData("URL", "some URL");
It is important to note that the
object will hold only one string value, so each subsequent call to
will erase the data that was previously stored in it.
After storing the string data, we can retrieve it by using
getData() method. Once again, we must provide
the data type when doing this operation. The syntax for each case is as
var sText = window.event.dataTransfer.getData("text"); var sURL = window.event.dataTransfer.getData("URL");
Your last chance to make the call to
is on the
ondrop event. After that
dataTransfer object is
destroyed along with any data that it carries.
You may be asking yourself: What is the difference between the URL and text data types? At first glance, nothing; which is why I had to dig a little deeper to get the answer. Though the Microsoft documentation seems to overlook this, when you specify the URL data type, the user is then able to drag the object into another browser window and have it redirect to the URL that was stored. In effect, it becomes equivalent to dragging any other link into a browser window.
Take a look at this MSDN example. Here, you drag an image onto a span, and the span shows the URL of the image. Open up a second browser window and drag the image onto it. The browser will redirect to the URL of the image.
Note that in this example, the
is incorrectly indicated as a drop target. It doesn't cancel either the
ondragover events, which is why the cursor
does not change when the image is dragged over it. In short, you would never
want to use the code from this example, but it does illustrate how
with a URL data type actually works.
Another interesting thing about the
object is that it automatically gets loaded with text when dragging a text
selection, so you can just use
it is dropped without ever using
Here is our earlier example with this functionality
dropEffect and effectAllowed
Another important use of the
object is to specify what actions can be done with the dragged object and the
drop target; this is where the
effectAllowed properties come in.
effectAllowed property is
set on the dragged object and indicates which operations are allowed
when the object is dropped. The possible values are uninitialized (default),
none (no dropping allowed), copy, link, move, copyLink, copyMove, linkMove, and
all (all effects are allowed). This property must be set during the ondragstart
window.event.dataTransfer.effectAllowed = "move";
dataTransfer object is
storing a URL, then the
specifies which cursor is displayed when the URL is dropped onto another
browser window as well as the cursor that is displayed on a drop target in the
dropEffect property is
set on the drop target, indicating what the allowed drop behavior can
be. This property has four possible values: none (default), move, link, and
copy. Each of these values causes a different cursor to be displayed when an
object is dragged over the drop target. If you want to use anything other than
ondrop must have its
default behavior cancelled in addition to
ondragenter. This property should be set on
window.event.dataTransfer.dropEffect = "move";
If the values for
dropEffect are not compatible, then a
"no-drop" cursor is shown when the object is dragged over the drop target.
Compatible values contain the same word, for example, if
is "move" the compatible
are "move," "linkMove," and "copyMove."
effectAllowed is "all," it is compatible with
For more information on each of these properties, visit MSDN at http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/effectallowed.asp and http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/dropEffect.asp.
Created: October 23, 2002
Revised: October 23, 2002