DataTransfer.dropEffect

DataTransfer.dropEffect 属性控制在拖放操作中给用户的反馈(通常是视觉上的)。它会影响在拖拽过程中光标的手势。例如,当用户 hover 在一个放置目标元素上,浏览器的光标可能会预示了将会发生什么操作。

DataTransfer 被创建时,dropEffect 被设置为一个字符串。读这个值时会返回它的当前值。设置这个值时,如果这个新的值是下面列出的值中的一个,这个属性的值就会被设置为这个新的值,其他的值都会被忽略。

对于 dragenterdragover 事件,dropEffect 会根据用户的请求的行为进行初始化。具体如何初始化和浏览器平台有关,但是通常来讲,用户可以通过按住修改键,比如 alt 键来修改想要的行为。当我们期望得到一个指定的行为时而不是用户的请求行为时,可以通过 dragenterdragover 事件处理修改 dropEffect 的值。

对于 dropdragend 事件,dropEffect 会被设置为想要得到的值,即最后一次 dragenterdragover 事件后 dropEffect 的值。例如,在一个 dragend 事件中,如果期望得到的 dropEffect 是“move”,那么被拖拽的数据会从源中移除。

语法

js
dataTransfer.dropEffect;

一个代表拖动操作效果的 DOMString,可能的值有:

copy

在新位置生成源项的副本

move

将项目移动到新位置

在新位置建立源项目的链接

none

项目可能禁止拖放(译者注:还与 effectAllowed 设置的值相关)

将任何其他值赋给 dropEffect 都没有效果,这种情况下会保留旧值。

示例

这个例子演示了 dropEffecteffectAllowed 属性的用法

HTML

html
<div>
  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
  id="target"
  ondrop="drop_handler(event);"
  ondragover="dragover_handler(event);">
  Drop Zone
</div>

CSS

css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}

JavaScript

js
function dragstart_handler(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";
}

function drop_handler(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
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

function dragover_handler(ev) {
  console.log(
    "dragOver: dropEffect = " +
      ev.dataTransfer.dropEffect +
      " ; effectAllowed = " +
      ev.dataTransfer.effectAllowed,
  );
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

规范

Specification
HTML Standard
# dom-datatransfer-dropeffect-dev

浏览器兼容性

BCD tables only load in the browser

参见