dropEffect

Summary

Gets the type of drag-and-drop operation currently selected or sets the operation to a new type.

Property of dom/DataTransfer dom/DataTransfer

Syntax

var dropEffect = event.dataTransfer.dropEffect;
event.dataTransfer.dropEffect = newDropEffect;

Return Value

Returns an object of type StringString

One of the following values:

none
copy
link
move

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>

Notes

The dropEffect property must be used with the effectAllowed property. These properties are set on the source object of a drag-and-drop operation. The effectAllowed property determines which drag-and-drop operations are available from the source object. The dropEffect property determines which drag-and-drop operations are allowed on the target object. For example, the source object might set the effectAllowed property to all drag-and-drop operations, while the target object specifies that the dropEffect allows only copy operations.

The recommended technique for dropping text is to set the dropEffect in the target object’s event handler function for the following events: ondragenter, ondragover, and ondrop. The effectAllowed property must be set in one of the source object’s drag-and-drop event handlers, such as the ondragstart event.

The target object of a drag-and-drop operation can set the dropEffect during the following events: ondragenter, ondragover, and ondrop. To display the cursor until the final drop, the default action of the following events must be canceled: ondragenter, ondragover, and ondrop: and the dropEffect must be set. Otherwise, the copy cursor, move cursor, or link cursor set by this property displays only until the first valid drop target is intersected, at which point the cursor is replaced by the drop/no-drop cursor for the rest of the drag operation.

There is a default drag-and-drop functionality for the following elements: a, img, textarea, and input type=text. When one of these objects is the source element, the default drop effect cannot be overridden by setting the dropEffect property of the target element. Instead, the default behavior of the source object must be canceled.

Related specifications

HTML5: Candidate Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]