You are here: Reference > JavaScript > client-side > event handling > objects > dataTransfer

dataTransfer object

Browser support:
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:
dropEffect
Specifies or retrieves the type of the drag-and-drop operation.
effectAllowed
Specifies or retrieves the allowed types of the current drag-and-drop operation.
files
3.65
Returns a FileList collection that represents the dropped files during the current drag-and-drop operation.
mozItemCount
Returns the number of dragged items during the current drag-and-drop operation.
mozUserCancelled
Returns whether the current drag-and-drop operation has been canceled by the user.
types
5
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? yes no

Related pages:

External links:

User Contributed Comments

Post Content

Post Content