当前位置：文江博客知识库简体中文文档 Web API DataTransfer dropEffect

DataTransfer.dropEffect - Web API 接口参考编辑

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

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

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

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

语法

dataTransfer.dropEffect;

值

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

copy: 在新位置生成源项的副本
move: 将项目移动到新位置
link: 在新位置建立源项目的链接
none: 项目可能禁止拖放（译者注：还与effectAllowed设置的值相关）

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

示例

这个例子演示了dropEffect 和 effectAllowed属性的用法

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

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

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

#target {
  border: 1px solid black;
}

JavaScript

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"
}

规范

规范	状态	备注
HTML Living Standard dropEffect	Living Standard
HTML 5.1 dropEffect	Recommendation	Initial definition

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.