DataTransfer：dropEffect 属性

DataTransfer.dropEffect 属性控制在拖放操作期间向用户提供的反馈（通常是视觉上的）。它会影响在拖动时显示的鼠标光标。例如，当用户将鼠标悬停在目标放置元素上时，浏览器的鼠标光标可能表示将执行哪种类型的操作。

当创建 DataTransfer 对象时，dropEffect 会设置为一个字符串值。在获取时，它会返回当前值。在设置时，如果新值为以下列出的值之一，则该属性的当前值将设置为新值，其他值将被忽略。

对于 dragenter 和 dragover 事件，dropEffect 将根据用户请求的操作进行初始化。这将由平台决定，但通常用户可以按住 Alt 键等修饰键来调整所需的操作。在 dragenter 和 dragover 事件的事件处理程序中，如果希望执行的操作与用户请求的操作不同，则应修改 dropEffect。

对于 drop 和 dragend 事件，dropEffect 将设置为所需的操作，这将是最后一次 dragenter 或 dragover 事件后的 dropEffect 值。例如，在 dragend 事件中，如果所需的 dropEffect 为“move”，则应从源中删除正在拖动的數據。

值

一个表示拖动操作效果的字符串。可能的值为

copy

在新的位置创建一个源项目的副本。

move

将项目移到新的位置。

在新的位置建立到源的链接。

none

项目可能无法放下。

将任何其他值分配给 dropEffect 不会有任何影响，并将保留旧值。

示例

此示例显示了 dropEffect 和 effectAllowed 属性的使用。

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
  const 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 标准
# dom-datatransfer-dropeffect-dev

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅