dataTransfer object
Provides access to predefined clipboard formats for use in drag-and-drop operations.
Members
The dataTransfer object has these types of members:
Methods
The dataTransfer object has these methods.
| Method | Description |
|---|---|
| clearData |
Removes one or more data formats from the clipboard through the dataTransfer object or the clipboardData object. |
| getData |
Gets the data in the specified format from the clipboard through the dataTransfer object or the clipboardData object. |
| setData |
Assigns data in a specified format to the dataTransfer object or the clipboardData object. |
Properties
The dataTransfer object has these properties.
| Property | Description |
|---|---|
|
Sets or gets the type of drag-and-drop operation and the type of cursor to display. | |
|
Sets or gets which data transfer operations are allowed for the object on the source element. | |
|
Returns a FileList of the files being dragged. | |
|
Returns a string list of formats that were sent in the ondragstart event. |
Standards information
There are no standards that apply here.
Remarks
The dataTransfer object makes it possible to customize the handling of drag-and-drop operations. It is available through the event object.
The dataTransfer object is used in source and target events. Typically, the setData method is used with source events to provide information about the data being transferred. In contrast, the getData method is used with target events to stipulate which data and data formats to retrieve.
This object is available in script as of Microsoft Internet Explorer 5.
Examples
This example uses the setData and getData methods of the dataTransfer object to perform a drag-and-drop operation.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/obj_dataTransferEX.htm
<head>
<script>
var sAnchorURL;
function InitiateDrag()
/* The setData parameters tell the source object
to transfer data as a URL and provide the path. */
{
event.dataTransfer.setData("URL", oSource.href);
}
function FinishDrag()
/* The parameter passed to getData tells the target
object what data format to expect. */
{
sAnchorURL = event.dataTransfer.getData("URL")
oTarget.innerText = sAnchorURL;
}
</script>
</head>
<body>
<a id="oSource" href="about:Example_Complete" onclick="return(false)"
ondragstart="InitiateDrag()">Test Anchor</a>
<span id="oTarget" ondragenter="FinishDrag()">Drop the Link Here</span>
</body>
Send comments about this topic to Microsoft
Build date: 1/23/2013
