 | ||
| ||
Microsoft® Internet Explorer 5 introduces an extensive data transfer implementation. For Internet Explorer, the term data transfer describes writing information to and reading it from a clipboard through a data transfer object. The information that is transferred includes both the data format and the data itself.
Two processes are enabled to make use of this functionality. The first process is cut/copy/paste editing through the browser Edit and shortcut menus. This capability is important for facilitating repeated editing tasks where persisting information in the system clipboard provides ease of use. One example of this capability is pasting the same data multiple times. The second process is drag-and-drop operations. Drag-and-drop adds the advantages of immediacy and intuitiveness because the user can simply select an HTML element and drag it to a new location. This functionality is best enabled for one-time operations because, once the drag operation ends, all trace of the data being transferred disappears. Taken together, this new editing functionality allows Web developers to incorporate more of the typical user-interface interaction that users have come to expect of good software.
Current browser functionality enables programmatic control over what data formats get transferred from data source to data target. This control extends to data transfers within the browser window, from one instance of the browser to another, from browser to desktop, and from browser to another OLE drag and drop application, such as Microsoft Word. Currently, for data security reasons, Internet Explorer prevents any drop target in the browser from accessing data that originates in another security domain or from another desktop application.
The data source stipulates the type of data transfer—move, copy, or link—as well as what information—an image source path, a text string, or a URL for an anchor—is to be delivered. For example, shopping cart applications make use of this capability. Such applications display a catalogue and an order form. They allow users to drag the image of the item they wish to purchase and drop it onto the order form. At that point, text associated with that image, rather than the image itself, will be copied to the form. In one simple operation, the price, product, brand, and serial number can be displayed. Of course, images aren't the only data sources. Anchors, text, and text controls can function as data sources as well.
Target objects may look just like source objects. However, their role is very different from that of the data source. Target objects provide feedback about the data transfer operation. The feedback comes in two forms: information for the user and programmatic notifications. The cursor can be set to display the copy, move, or link system icon. These icons provide information to the user during a drag-and-drop operation. Binding to notification events, such as onbeforepaste and ondrop, delivers information that the Web author can use to script custom behavior. In the case of the shopping cart application, this custom behavior is comprised of first retrieving the product information associated with the image and then pasting it to the order form.
Internet Explorer 4.0 offers very limited data-transfer functionality. It supports default drag-and-drop behavior for images, anchors, and text controls. The Web developer's control lies primarily in whether to enable drag-and-drop functionality at all. Cut, copy, and paste menu events cannot be trapped at all. With the release of Internet Explorer 5, this functionality is greatly improved and enhanced.
The functionality outlined in this section empowers the Web author to code custom drag-and-drop and editing behavior.
Internet Explorer 5 supports two objects for transferring data, the dataTransfer and clipboardData objects. Available through the event and window objects respectively, each comprises a gateway through which information is set on source objects and retrieved by target objects.
The dataTransfer object offers programmatic control over drag-and-drop operations. It passes data to its own clipboard, where it persists only until the ondragend event fires. Once that event fires, the data is purged from the clipboard, irrespective of whether there was a successful transfer of data.
The dataTransfer object supports two drag-and-drop specific properties as well as some data transfer methods. The properties effectAllowed and dropEffect provide visual feedback during a drag operation and are critical to achieving consistency with the Microsoft Windows® user interface. Through the setData, getData, and clearData methods, the dataTransfer object enables access to predefined data formats. These formats support user-interface manipulation of everything from text, to images, to anchors.
The clipboardData object is reserved for editing actions performed through the Edit menu, shortcut menu, and shortcut keys. In contrast to the dataTransfer object, it transfers information using the system clipboard and retains it until data from the next editing operation supplants it. As previously mentioned, this form of data transfer is particularly suited to multiple pastes of the same data. Like the dataTransfer object, the clipboardData object supports the setData, getData, and clearData methods.
Custom editing code can execute in any of the editing-related event handlers: onbeforecut, onbeforecopy, onbeforepaste, oncut, oncopy, and onpaste. Cut or copy operations of the clipboardData object pass data from the source object using the setData method; whereas, paste operations retrieve the data for the target object using the getData method.
In contrast to Microsoft Windows, the Internet Explorer 5 implementation of data transfer does not support CTRL and SHIFT keyboard modifiers for drag-and-drop operations. In other words, the user cannot determine whether the object should be copied, moved, or linked through the use of these modifiers. Instead, the Web author stipulates drag functionality through effectAllowed and notifies the end user through dropEffect.
The effectAllowed property specifies what data transfer operations are allowed for the object. This property is generally set in the ondragstart event for the source object because that is the last event fired before a drag-and-drop operation begins. This property supports a flexible set of values. Not only are copy, move, and link valid values, but also copyMove, copyLink, linkMove, all, and none. For compound values like copyMove that name two different data transfer operations, the target object default determines which of the two values is implemented.
This property also can override the default behavior of other applications. For example, the browser script can set the effectAllowed property to copy and thereby override the Microsoft® Word default of move. Within the browser, copy is the default effectAllowed behavior, except for anchors, which are set to link by default.
Both effectAllowed and dropEffect are available only through the dataTransfer object and must be used together for dropEffect to work.
The dropEffect property stipulates which standard system cursor to display during a drag-and-drop operation. The value of this property is set for the target object in the ondragenter or ondragover event. The exception arises when an image, an anchor in a frame, a TEXTAREA object, or a text input object comprises the source element. These objects have supported drag-and-drop by default since Internet Explorer 4.0. Consequently, the target object cannot override the drop effect setting.
Note To display the desired cursor until the final drop, the default action of the ondragenter, ondragover, and ondrop events must be canceled and the dropEffect must be set. Otherwise, the copy, move, or link cursor set by this property displays only until the first valid drop target is intersected, at which point it is replaced by the drop/no-drop cursor for the duration of the drag operation.
All parameters for these methods are case-insensitive, and the first parameter is always a string value. Both the dataTransfer and clipboardData objects support these methods.
The setData method specifies what data format and information to transfer through the dataTransfer or clipboardData object. It is typically invoked in the ondragstart event for the drag source or the onbeforecut or onbeforecopy event for editing. The first parameter accepts a string value of Text or URL, with Text as the default. The second parameter, a variant, associates information with the source object. This information can be descriptive text, a source path to an image, or a URL for an anchor. The second parameter is required when information about the location of the object being transferred is needed. Such situations include providing URLs for anchors or desktop shortcuts as well as source paths for images.
The getData method specifies what data format to retrieve from the clipboard using the dataTransfer object. This method is invoked by the target object and takes a single, required parameter. The parameter is a string representing the data format that the drop target should read. This parameter must match the data format passed into the setData method, namely, Text or URL. The value of the parameter determines how the getData method interprets the information passed through the second parameter of the setData method. When the data formats passed in setData and getData are mismatched, the drag operation fails.
The clearData method of the dataTransfer object removes one or more data formats from the dataTransfer object. This method recognizes more formats than the other two. Valid formats include: Text, URL, File, HTML, and Image. All formats are cleared when no parameter is passed. In general, this method is most useful in source events, such as the ondragstart event. However, clearData can override the default behavior of the target object when invoked in the ondrop event.
To complement the new features outlined above, Internet Explorer 5 introduces a rich set of notification events on both data source and target objects. All data transfer events support bubbling and cancellation of the default action. Consequently, data transfer code can be modularized by handling the events at the container level. When coding custom behavior, it is essential to cancel default actions of all data transfer events that are handled. This way, browser default behaviors will not override custom code.
The following drag-and-drop events fire on the source object. Note in particular that the source object receives notification when the drag operation ends—in the form of the ondragend event—yet not of whether the selection has been dropped to a valid target. That information is provided by the ondrop event of the target object.
The following events fire on the target object.
The following events fire on the source object for editing events. Use the setData method of the clipboardData object to transfer information.
The following events fire on the target object for editing events. Use the getData method of the clipboardData object to transfer information.
These events make it possible to override the browser default behavior in favor of custom event handling in a Web application. One need only cancel the default action in the event by including event.returnValue = false in the appropriate event handler.
A brief description of the drag-and-drop events follows, organized by the order in which they fire.
In Internet Explorer 4.0, programmatic control over data transfer operations is very limited. No data transfer object, methods, or properties exist. Moreover, what drag-and-drop capability exists is hardwired into the browser. Anchors and images create a link when dragged to the desktop. Anchors, when dragged to another browser window, cause the browser to navigate to their URLs. An image dragged to another browser window is displayed alone on a page. And text controls allow their contents to be moved between text controls on the same page as well as from page to page. Any of these default actions can be canceled or can send notification that a drag operation has been initiated in the ondragstart event. No programmatic control over editing through the edit menu, shortcut menu, or keyboard accelerators is available in Internet Explorer 4.0. This functionality has been added to the latest browser release in the form of the new cut, copy, and paste events.
Internet Explorer 5 honors the Internet Explorer 4.0 implementation of default drag-and-drop functionality. To substitute custom code for the version 4.0 defaults of these objects, simply cancel the return value in ondragstart. At this point, images, anchors, and text controls require the same amount of coding as, say, a DIV or SPAN object. In short, if text in a TEXTAREA is moved, then the text in the source TEXTAREA must be removed, just as if the text in the source TEXTAREA is cut and pasted, then both the source and the target TEXTAREAs must be updated. The innerText property is suited to this purpose.
For those interested in scripting for down-level browsers, one simple check can prevent Web pages containing data transfer functionality from causing scripting errors. All that is required is a conditional statement, which bases code execution on the existence of the dataTransfer and clipboardData objects. See the example below.
if ( event.dataTransfer && window.clipboardData)
.
.
.
Scripted copy and paste operations via the dataTransfer and clipboardData objects are controlled by Internet Explorer security settings. By default, there is no restriction on the ability of script to modify the system clipboard, and all supported data formats may be transfered freely between Internet Explorer and other applications running on the system. A user has the option of disabling this feature by modifying the "Allow paste operations via script" radio button group in the Security Settings dialog available through the Internet Options Control Panel applet. Settings can be customized for each security zone.
The example below demonstrates the basic code for programming a drag-and-drop operation. This code represents the foundation of a shopping cart Web application, where the user drags the icon to the order form and receives textual feedback about the item.
<HEAD>
<SCRIPT>
/* ----------------------------------------------
fnSetInfo sets the data format in the first
parameter and provides the text to drop in second.
The second line copies text.
----------------------------------------------*/
function fnSetInfo() {
event.dataTransfer.setData("Text", "Microsoft Golf 1998");
event.dataTransfer.effectAllowed = "copy";
}
/* ----------------------------------------------
fnGetInfo is called by the target
object in the ondrop event.
It cancels the default action and
sets the cursor to the system copy icon.
Then it specifies the data format to retrieve.
Last it sets the value property of oTarget
object to the information from getData.
----------------------------------------------*/
function fnGetInfo() {
event.returnValue = false;
event.dataTransfer.dropEffect = "copy";
oTarget.value = event.dataTransfer.getData("Text");
}
/* ----------------------------------------------
fnCancelDefault
Cancels the default action in ondragenter
and ondragover so that the copy cursor will
display until the selection is dropped.
----------------------------------------------*/
function fnCancelDefault() {
event.returnValue = false;
event.dataTransfer.dropEffect = "copy";
}
</SCRIPT>
</HEAD>
<BODY>
<IMG ID=oSource SRC="Golf98.gif" ondragstart="fnSetInfo()">
<P>Drag the image and drop it onto the text box below.</P>
<INPUT ID=oTarget VALUE="[drop text here]"
ondragenter="fnCancelDefault()"
ondrop="fnGetInfo()"
ondragover="fnCancelDefault()">
</BODY>
Did you find this topic useful? Suggestions for other topics? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top