Click to return to the DHTML, HTML     
custom Element | custom O...     DD Element | DD Object     DHTML Objects    
Web Workshop  |  DHTML, HTML & CSS

dataTransfer Object


Provides access to predefined clipboard formats for use in drag-and-drop operations.

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.

Members

Example

This example uses the setData and getData methods of the dataTransfer object to perform a drag-and-drop operation.

Sample Code

<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>
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
event


Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.