dataTransfer object
| 3.5 | ||||
Represents a drag-and-drop operation.
Note: The dataTransfer object is supported in Firefox from version 3.5.
The dataTransfer object is similar to the clipboardData object, but it can be used for customizing drag-and-drop operations.
The dataTransfer object is only accessible through the event object in case of the following events: ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart and the ondrop.
Note: The dataTransfer object provides support for dragging multiple items in Firefox. Similarly to the clearData, getData and setData methods, Firefox supports the mozClearDataAt, mozGetDataAt and mozSetDataAt methods that allow you to handle multiple items for drag operations. For further details, please see the pages for the mentioned methods.
Syntax:
Properties that reference the object:
| • | event.dataTransfer |
Possible members:
Properties:
| Specifies or retrieves the type of the drag-and-drop operation. | ||||||||||||
| Specifies or retrieves the allowed types of the current drag-and-drop operation. | ||||||||||||
|
Returns a FileList collection that represents the dropped files during the current drag-and-drop operation. | |||||||||||
| Returns the number of dragged items during the current drag-and-drop operation. | ||||||||||||
| Returns whether the current drag-and-drop operation has been canceled by the user. | ||||||||||||
|
Returns a DOMStringList collection that contains the available data formats for the first item of the current drag-and-drop operation. |
Methods:
| addElement | Specifies the feedback image for the current drag-and-drop operation. | ||||||
| clearData | Removes the specified formatted data from the current drag-and-drop operation. | ||||||
| getData | Retrieves the specified formatted data from the current drag-and-drop operation. | ||||||
| mozClearDataAt | Removes the specified formatted data associated to the dragged item at the specified position from the current drag-and-drop operation. | ||||||
| mozGetDataAt | Retrieves the specified formatted data associated to the dragged item at the specified position from the current drag-and-drop operation. | ||||||
| mozSetDataAt | Specifies the data, its format and the associated position for the current drag-and-drop operation. | ||||||
| mozTypesAt | Returns a DOMStringList collection that contains the available data formats for the item at the specified position in the current drag-and-drop operation. | ||||||
| setData | Specifies the data and its format for the current drag-and-drop operation. | ||||||
| setDragImage | Specifies the feedback image and the mouse cursor position for the current drag-and-drop operation. |
Example HTML code 1:
This example illustrates the use of the dataTransfer object. Note that the getData method always returns an empty string in a handler for the ondragstart event in Safari and Google Chrome so the dropped text's letters won't be in reverse order.
|
|
||||
<head> <script type="text/javascript"> function OnDragStart (event) { if (event.dataTransfer) { var format = "Text"; var textData = event.dataTransfer.getData (format); // always empty in Safari and Google Chrome if (textData) { if (textData.length > 20) { event.dataTransfer.clearData (format); } else { var reverseText = ""; for (var i = 0; i < textData.length; i++) { reverseText += textData.charAt (textData.length - i - 1); } event.dataTransfer.setData (format, reverseText); } } } } function OnDropTarget (event) { if (event.dataTransfer) { var format = "Text"; var textData = event.dataTransfer.getData (format); if (!textData) { textData = "<span style='color:red'>The data transfer contains no text data.</span>"; } var targetDiv = document.getElementById ("target"); targetDiv.innerHTML = textData; } else { alert ("Your browser does not support the dataTransfer object."); } if (event.stopPropagation) { event.stopPropagation (); } else { event.cancelBubble = true; } return false; } </script> </head> <body> <div ondragstart="OnDragStart (event)" style="width:300px; height:100px; background-color:#80f0f0;"> Select and drag some text from this field and drop into the green zone. The dropped text's letters will be in reverse order. The length of the dragged text cannot be longer than 20 characters! </div> <div id="target" ondragenter="return false;" ondragover="return false;" ondrop="return OnDropTarget (event);" style="width:300px; height:100px; background-color:#80f080;"> </div> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Related pages:
External links:
User Contributed Comments