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

You are here: Reference > JavaScript > client-side > event handling > properties > dropEffect (dataTransfer)

dropEffect property (dataTransfer)

Browser support:

	3.5

Specifies or retrieves the type of the drag-and-drop operation.

Note: The dataTransfer object and its dropEffect property are supported in Firefox from version 3.5.

The value of the dropEffect property also affects the style of the displayed cursor.

The type of a drag-and-drop operation depends on the allowed types of data transfer and the operation type specified with the dropEffect property. The allowed types of a drag-and-drop operation can be set with the effectAllowed property. The dropEffect property specifies the actual type of the drag-and-drop operation, but if it is not allowed, the dragged content cannot be dropped.

It is advisable to specify the allowed types of transfer at the start point of the drag, in a handler for the ondragstart event. Each drop target element can specify its own operation type with the dropEffect property. If the dropEffect property is not specified, the operation type depends on the value of the effectAllowed property, the current platform and the use of platform specific modifier keys during dragging.

If you want to set the operation type for an element, modify the value of the dropEffect property in a handler for the ondragenter and ondragover events.

Syntax:

object.dropEffect;

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

This property is read/write.

Possible values:

String that sets or retrieves the type of the operation.

One of the following values:

copy

Copy operation with copy cursor.

link

Link operation with link cursor.

move

Move operation with move cursor.

none

No-drop cursor is displayed.

Default: none.

Example HTML code 1:

This example illustrates the use of the dropEffect property:

<head>
    <script type="text/javascript">
        function SetDragEffect (event) {
            if (event.dataTransfer) {
                var dragEffect = document.getElementById ("dragEffect");
                event.dataTransfer.effectAllowed = dragEffect.value;
            }
        }

        function SetDropEffect (event) {
            if (event.dataTransfer) {
                var dropEffect = document.getElementById ("dropEffect");
                event.dataTransfer.dropEffect = dropEffect.value;
            }
        }

        function GetDroppedItem (event) {
            if (!event.dataTransfer) {
                alert ("Your browser does not support the dataTransfer object.");
                return;
            }
            
            var transferObj = event.dataTransfer;
            
            var textData = transferObj.getData ("Text");

            var info = document.getElementById ("info");
            if ('textContent' in info) {
                info.textContent = textData;
            }
            else {
                info.innerText = textData;
            }
        }
    </script>
</head>
<body>
    <table cellpadding="5px" cellspacing="5px">
        <tr>
            <td>
                Please select the allowed drag effect:
                <select id="dragEffect">
                    <option value="none">none</option>
                    <option value="copy">copy</option>
                    <option value="move">move</option>
                    <option value="link">link</option>
                    <option value="copymove">copymove</option>
                    <option value="copylink">copylink</option>
                    <option value="linkmove">linkmove</option>
                    <option value="all">all</option>
                </select>
            </td>
            <td>
                Please select the allowed drop effect:
                <select id="dropEffect">
                    <option value="none">none</option>
                    <option value="copy">copy</option>
                    <option value="move">move</option>
                    <option value="link">link</option>
                </select>
            </td>
        </tr>
        <tr>
            <td ondragstart="SetDragEffect (event)" style="background-color:#e0b0f0;">
                Select some text and drag that!
            </td>
            <td ondragstart="return false;" ondragover="SetDropEffect (event); return false;" ondragenter=" return false;"
                 ondrop="GetDroppedItem (event);"
                 style="background-color:#b0e0f0;">
                Try to drop the selected text here!
            </td>
        </tr>
    </table>
    <div style="margin-top:30px; width:200px; height:50px; background-color:#b0f0e0;">
        The dropped text:
        <div id="info"></div>
    </div>
</body>