| home / programming / javascript / dragdropie |    [previous] [next] |
|
|
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.
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.
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 http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/effectallowed.asp and http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/dropEffect.asp.
| home / programming / javascript / dragdropie | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: October 23, 2002
Revised: October 23, 2002
URL: http://webreference.com/programming/javascript/dragdropie/2.html
