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

[previous] [next]

Drag and Drop in Internet Explorer

The dataTransfer Object

In addition to the events that IE 5.0 introduced, the dataTransfer object also made its first appearance. The dataTransfer 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()

When the ondragstart event fires, the dataTransfer object leaps into existence as a property of window.event (it does not exist for any events other than those listed in this article). At this point, we can use the setData() 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 dataTransfer object will hold only one string value, so each subsequent call to setData() will erase the data that was previously stored in it.

After storing the string data, we can retrieve it by using the getData() method. Once again, we must provide the data type when doing this operation. The syntax for each case is as follows:

var sText = window.event.dataTransfer.getData("text");
var sURL = window.event.dataTransfer.getData("URL");

Your last chance to make the call to getData() is on the ondrop event. After that point, the 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 <span> is incorrectly indicated as a drop target. It doesn't cancel either the ondragenter or 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 getData() with a URL data type actually works.

Another interesting thing about the dataTransfer object is that it automatically gets loaded with text when dragging a text selection, so you can just use getData() when it is dropped without ever using setData(). Here is our earlier example with this functionality added.

dropEffect and effectAllowed

Another important use of the dataTransfer object is to specify what actions can be done with the dragged object and the drop target; this is where the dropEffect and effectAllowed properties come in.

The 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 event:

window.event.dataTransfer.effectAllowed = "move";

If the dataTransfer object is storing a URL, then the effectAllowed property 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 same page.

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 "copy", then ondrop must have its default behavior cancelled in addition to ondragover and ondragenter. This property should be set on the ondragenter event:

window.event.dataTransfer.dropEffect = "move";

If the values for effectAllowed and 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 dropEffect is "move" the compatible effectAllowed values are "move," "linkMove," and "copyMove." When effectAllowed is "all," it is compatible with any dropEffect value.

For more information on each of these properties, visit MSDN at https://msdn.microsoft.com/workshop/author/dhtml/reference/properties/effectallowed.asp and https://msdn.microsoft.com/workshop/author/dhtml/reference/properties/dropEffect.asp.

[previous] [next]

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

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