DataTransfer.dropEffect

翻译正在进行中。

 

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

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

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

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

语法

dataTransfer.dropEffect;

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

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

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

示例

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

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dropEffectChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

另见

文档标签和贡献者

此页面的贡献者: qiudongwei, Mandy-Tang
最后编辑者: qiudongwei,