all
alt
ch
dir
id
min
rel
top
url
URL
urn
Expand Minimize

effectAllowed property

Sets or gets which data transfer operations are allowed for the object on the source element.

Syntax

JavaScript

p = object.effectAllowed

 

Property values

Type: String

copy

Selection is copied.

link

Selection is linked to the drop target by the data transfer operation.

move

Selection is moved to the target location when dropped.

copyLink

Selection is copied or linked, depending on the target default.

copyMove

Selection is copied or moved, depending on the target default.

linkMove

Selection is linked or moved, depending on the target default.

all

All drop effects are supported.

none

Dropping is disabled and the no-drop cursor is displayed.

uninitialized

Default. No value has been set through the effectAllowed property. In this case, the default effect still works, although it cannot be queried through this property.

Remarks

Set the effectAllowed property in the ondragstart event. This property is used most effectively with the dropEffect property.

This property can be used to override the default behavior in other applications. For example, the script can set the effectAllowed property to copy for a text field and override the Microsoft Word default of move. In the application, copy is the default effectAllowed behavior; however, anchors are set to link by default, and text fields are set to move by default.

By setting effectAllowed to none, dropping is disabled but the no-drop cursor is still displayed. To avoid displaying the no-drop cursor, cancel the returnValue of the ondragstart window.

Examples

This example uses the dropEffect property and the effectAllowed property to move text in a drag-and-drop operation.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/effectAllowedEX.htm


<!DOCTYPE html>
<html>

<head>
  <title>Example of the effectAllowed and dropEffect Properties</title>
</head>

<body>
  <h1>Example of the effectAllowed and dropEffect Properties</h1>
  <p>
    The code in this example sets the <strong>effectAllowed</strong> property 
    to <span class="literal">move</span>. It sets the <strong>dropEffect</strong>
    property to display the move cursor. The default action must be 
    canceled in all events that are handled in this example, 
    <strong>ondragstart</strong>, <strong>ondragover</strong>, <strong>ondragenter</strong>, and 
    <strong>ondrop</strong>.
  </p>
  <p><strong>[not this text] <span id="oSource" ondragstart="fnHandleDragStart()">[select and drag this text]</span> [not this text]</strong></p>
  <div id="oTarget"
    style="background: beige; height: 100px; width: 200px; border: solid black 1px;"
    ondrop="fnHandleDrop()"
    ondragover="fnCancelDefault()"
    ondragenter="fnHandleDragEnter()">
    [drop text here]
  </div>
  <script>
    // This function is called when the user 
    //  initiates a drag-and-drop operation.
    function fnHandleDragStart() {
      var oData = window.event.dataTransfer;

      // Set the effectAllowed on the source object.
      oData.effectAllowed = "move";
    }

    // This function is called by the target 
    //  object in the ondrop event.
    function fnHandleDrop() {
      var oTarg = window.event.srcElement;
      var oData = window.event.dataTransfer;

      // Cancel default action.
      fnCancelDefault();

      // Set the content of the oTarget to the information stored
      //  in the data transfer object in the desired format.
      oTarg.innerText += oData.getData("text");
    }

    // This function sets the dropEffect when the user moves the 
    //  mouse over the target object.
    function fnHandleDragEnter() {
      var oData = window.event.dataTransfer;

      // Cancel default action.
      fnCancelDefault();

      // Set the dropEffect for the target object.
      oData.dropEffect = "move";
    }

    function fnCancelDefault() {
      // Cancel default action.
      var oEvent = window.event;
      oEvent.returnValue = false;
    }
  </script>
</body>

</html>

See also

dataTransfer
Reference
clearData
getData
setData
Conceptual
About DHTML Data Transfer

 

 

Show:
© 2014 Microsoft