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

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

effectAllowed property (dataTransfer)

Browser support:

	3.5

Specifies or retrieves the allowed types of the current drag-and-drop operation.

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

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 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.effectAllowed;

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

This property is read/write.

Possible values:

String that specifies or retrieves the type of the effect to allow.

One of the following values:

all

The dragged content can be copied, moved and linked.

copy

The dragged content can be copied.

copyLink

The dragged content can be copied and linked.

copyMove

The dragged content can be copied and moved.

link

The dragged content can be linked.

linkMove

The dragged content can be linked and moved.

move

The dragged content can be moved.

none

The dragged content cannot be dropped and the no-drop cursor is displayed during dragging.

uninitialized

Default. The effectAllowed property is not initialized. The default behavior is 'move' for editable elements, 'link' for anchors and 'copy' for other elements.

Default: uninitialized.

Example HTML code 1:

This example illustrates the use of the effectAllowed 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>