This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

effectAllowed

Summary

Gets which kinds of data transfer operations are allowed for the object. Can be set (during the dragstart event) to change the allowed operations.

Property of dom/DataTransferdom/DataTransfer

Syntax

var effectAllowed = event.dataTransfer.effectAllowed;
event.dataTransfer.effectAllowed = newEffectAllowed;

Return Value

Returns an object of type StringString

One of the following values:

  • none
  • copy
  • copyLink
  • copyMove
  • link
  • linkMove
  • move
  • all
  • uninitialized

Examples

This example uses the dropEffect and effectAllowed properties of the DataTransfer object to display the move cursor.

<!doctype html>
<html>
 <head>
  <title>Example of the effectAllowed and dropEffect Properties</title>
  <style>
#oTarget {
  background: beige;
  height: 100px;
  width: 200px;
  border: solid black 1px;
}
  </style>
  <script>
// This function is called when the user
// initiates a drag-and-drop operation.
function fnHandleDragStart(e) {
  var oData = e.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(e) {
  var oTarg = e.target;
  var oData = e.dataTransfer;

  // Cancel default action.
  fnCancelDefault(e);

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

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

  // Cancel default action.
  fnCancelDefault(e);

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

function fnCancelDefault(e) {
  // Cancel default action.
  e.preventDefault();
}
function initialize() {
 var target = document.getElementById("oTarget");
 document.getElementById("oSource").addEventListener("dragstart", fnHandleDragStart, false);
 target.addEventListener("drop", fnHandleDrop, false);
 target.addEventListener("ondragover", fnCancelDefault, false);
 target.addEventListener("ondragenter", fnHandleDragEnter, false);
}

window.addEventListener("load", initialize, false);
  </script>
 </head>
 <body>
  <h1>Example of the effectAllowed and dropEffect Properties</h1>
  <p>The code in this example sets the <b>effectAllowed</b> property
to <span class="literal">move</span>. It sets the <b>dropEffect</b>
property to display the move cursor. The default action must be canceled in all events that are handled&#151;in this example,
<b>ondragstart</b>, <b>ondragover</b>, <b>ondragenter</b>, and
<b>ondrop</b>.</p>
<p>
<b>
  [not this text]
<span id="oSource">
  [select and drag this text]
</span>
  [not this text]
</b>
</p>
<p> </p>
<div id="oTarget">
[drop text here]
  </div>
 </body>
</html>

View live example

Notes

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.

Related specifications

HTML
Candidate Recommendation

Attributions