Javascript Reference
Categories: dataTransfer

javascript dataTransfer Description

@March 15, 2008, 1:22 a.m.
dataTransfer Firefox/Netscape/NN n/a IE 5(Win) Chrome/Safari/DOM n/a  



The dataTransfer object (accessible as a property of the event object) is a temporary container that scripts in IE 5 and later for Windows can use to transfer text data, particularly during script-controlled operations that simulate cutting, copying, and pasting, or that control dragging. Your script controls what data is stored in the dataTransfer object, such as just the text of an element, an element's entire HTML, or the URL of an image. For example, a page for children could display simple icon images of several different kinds of animals. If the user starts dragging the dog icon, the script initiated by the img element's ondragstart event handler can store a custom attribute value of that element (perhaps the URL of a pretty dog photo) into the dataTransfer object. When the user drops the icon into the designated area, the ondrop event handler's function reads the dataTransfer object's data, and loads the photo image into position on the page.


Even though an event object changes its properties with each new event action, the dataTransfer object preserves its data from one event to the next, until a script removes the data from the object or other data is stored in it. Properties of the dataTransfer object distinguish its powers from those of the clipboardData object. By setting the dropEffect and effectAllowed properties, your scripts can control the type of cursor icon that appears during drag and drop operations. Example 9-1 demonstrates how the properties and methods of the dataTransfer object can be wired to dragging events such that the cursor changes to a "copy" style when rolled atop a desired drop target.

For more information on transferring data via this object and the clipboardData object.

HTML Equivalent


Object Model Reference
Object-Specific Properties
dropEffect effectAllowed
Object-Specific Methods
clearData( ) getData( ) setData( )
Object-Specific Event Handler Properties



testing site
suhlaing - 2009-08-15

Powered by Linode.