DataTransfer: dropEffect property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

TheDataTransfer.dropEffect property controls thefeedback (typically visual) the user is given during a drag and drop operation. It willaffect which cursor is displayed while dragging. For example, when the user hovers overa target drop element, the browser's cursor may indicate which type of operation willoccur.

When theDataTransfer object is created,dropEffect is setto a string value. On getting, it returns its current value. On setting, if the newvalue is one of the values listed below, then the property's current value will be setto the new value and other values will be ignored.

For thedragenter anddragover events,dropEffect will be initialized based on what action the user is requesting.How this is determined is platform specific, but typically the user can press modifierkeys such as the alt key to adjust the desired action. Within event handlers fordragenter anddragover events,dropEffect shouldbe modified if a different action is desired than the action that the user isrequesting.

For thedrop anddragend events,dropEffect willbe set to the action that was desired, which will be the valuedropEffecthad after the lastdragenter ordragover event. In adragend event, for instance, if the desired dropEffect is "move", then thedata being dragged should be removed from the source.

Value

A string representing the drag operation effect. The possible valuesare:

copy: A copy of the source item is made at the new location.
move: An item is moved to a new location.
link: A link is established to the source at the new location.
none: The item may not be dropped.

Assigning any other value todropEffect has no effect and the old value isretained.

Example

This example shows the use of thedropEffect andeffectAllowed properties.

HTML

html

<div>  <p draggable="true">    Select this element, drag it to the Drop Zone and then release the selection    to move the element.  </p></div><div>Drop Zone</div>

CSS

css

div {  margin: 0em;  padding: 2em;}#source {  color: blue;  border: 1px solid black;}#target {  border: 1px solid black;}

JavaScript

const source = document.getElementById("source");const target = document.getElementById("target");source.addEventListener("dragstart", (ev) => {  console.log(    `dragStart: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,  );  // Add this element's id to the drag payload so the drop handler will  // know which element to add to its tree  ev.dataTransfer.setData("text", ev.target.id);  ev.dataTransfer.effectAllowed = "move";});target.addEventListener("drop", (ev) => {  console.log(    `drop: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,  );  ev.preventDefault();  // Get the id of the target and add the moved element to the target's DOM  const data = ev.dataTransfer.getData("text");  ev.target.appendChild(document.getElementById(data));});target.addEventListener("dragover", (ev) => {  console.log(    `dragOver: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,  );  ev.preventDefault();  // Set the dropEffect to move  ev.dataTransfer.dropEffect = "move";});