In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > mozSetDataAt (dataTransfer)

mozSetDataAt method (dataTransfer)

Browser support:

	3.5

Specifies the data, its format and the associated position for the current drag-and-drop operation.

Note: The dataTransfer object and its mozSetDataAt method are supported in Firefox from version 3.5.

The mozSetDataAt method is an extension of the setData method for dragging multiple items.

In Firefox, the modification of the dragged data is not allowed during the drag operation only at the start point of a drag operation. That's why, the mozClearDataAt and mozSetDataAt methods can only be called in a handler for the ondragstart event. The call to the mozClearDataAt and mozSetDataAt methods in other cases raises an exception.

Syntax:

object.mozSetDataAt (dataFormat, data, index);

You can find the related objects in the Supported by objects section below.

Parameters:

dataFormat

Required. String that specifies the format of the data to assign.
In Firefox, the data format can be an arbitrary string. If data for the specified format already exists, it is replaced with the new value. If the specified data format does not exist yet, both new data and its format are added to the current data transfer.

data

Required. String that specifies the data to assign to the current data transfer.

index

Required. A zero-based integer that specifies the position of the item in the list of dragged items. The value of the index parameter must be less or equal to the number of dragged items. You can get the number of dragged items with the mozItemCount property. If an item already exists at the specified position (the index parameter is less than the number of dragged items), the new data in its format is set for that item. If the index parameter is equal to the number of dragged items, a new item is added to the end of the list of dragged items and the specified data in its format is set for that item. If the index parameter is greater than the number of dragged items, the mozSetDataAt method raises an exception.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the mozClearDataAt, mozGetDataAt and mozSetDataAt methods.

<head>
    <script type="text/javascript">
        function OnDragStart (event) {
            if (event.dataTransfer) {
                if (event.dataTransfer.mozGetDataAt) {
                    var textData = event.dataTransfer.mozGetDataAt ("text/plain", 0);
                    if (textData) {
                        event.dataTransfer.mozSetDataAt ("text/html", "<span style='color:red'>" + textData + "</span>", 0);
                        event.dataTransfer.mozSetDataAt ("text/html", "<span style='color:green'>" + textData + "</span>", 1);
                        event.dataTransfer.mozSetDataAt ("text/html", "<span style='color:blue'>" + textData + "</span>", 2);
                        event.dataTransfer.mozClearDataAt ("text/plain", 0);
                    }
                }
            }
        }

        function OnDropTarget (event) {

            if (event.dataTransfer) {
                if (event.dataTransfer.mozGetDataAt) {
                    var htmlData = "";
                    for (var i = 0; i < event.dataTransfer.mozItemCount; i++) {
                        htmlData += event.dataTransfer.mozGetDataAt ("text/html", i);
                    }

                    var targetDiv = document.getElementById ("target");
                    targetDiv.innerHTML = htmlData;
                }
                else {
                    alert ("Your browser does not support the mozGetDataAt method.");
                }
            }
            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 yellow zone.
    </div>
    <div id="target" ondragenter="return false;" ondragover="return false;" ondrop="return OnDropTarget (event);"
        style="width:300px; height:100px; background-color:#f0f080;">
    </div>
</body>