DataTransfer: effectAllowed 属性

DataTransfer.effectAllowed 属性指定拖放操作允许的效果。copy 操作用于指示拖动的數據將從其當前位置複製到放置位置。move 操作用于指示拖动的數據將被移動，而 link 操作用于指示在源位置和放置位置之間建立某種形式的關係或連接。

此属性应在 dragstart 事件中设置，以设置拖放源的预期拖放效果。在 dragenter 和 dragover 事件处理程序中，此属性将设置为在 dragstart 事件期间分配的任何值，因此 effectAllowed 可用于确定允许哪种效果。

在除 dragstart 之外的事件中为 effectAllowed 分配值无效。

值

表示允许的拖放操作的字符串。可能的取值为

none

项目不能被放置。

copy

可以在新位置创建源项目的副本。

允许复制或链接操作。

copyMove

允许复制或移动操作。

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

linkMove

允许链接或移动操作。

move

项目可以移动到新位置。

all

所有操作都允许。

uninitialized

未设置效果时的默认值，等同于 all。

将任何其他值分配给 effectAllowed 不会有任何效果，并将保留旧值。

示例

设置 effectAllowed

在此示例中，我们在 dragstart 处理程序中将 effectAllowed 设置为 "move"。

HTML

html
<div>
  <p id="source" 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">Drop Zone</div>
<pre id="output"></pre>
<button id="reset">Reset</button>

CSS

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

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

#target {
  border: 1px solid black;
}

#output {
  height: 100px;
  overflow: scroll;
}

JavaScript

js
function dragstartHandler(ev) {
  log(`dragstart: 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 dropHandler(ev) {
  log(`drop: effectAllowed = ${ev.dataTransfer.effectAllowed}`);

  ev.preventDefault();
  // Get the id of the target and add the element to the target's DOM
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

function dragoverHandler(ev) {
  log(`dragover: effectAllowed = ${ev.dataTransfer.effectAllowed}`);
  ev.preventDefault();
}

const source = document.querySelector("#source");
const target = document.querySelector("#target");

source.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);

function log(message) {
  const output = document.querySelector("#output");
  output.textContent = `${output.textContent}\n${message}`;
  output.scrollTop = output.scrollHeight;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());

结果

规范

规范
HTML 标准
# dom-datatransfer-effectallowed-dev

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅