DataTransfer.dropEffect

这篇翻译不完整。请帮忙从英语翻译这篇文章

 

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

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

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

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

Syntax

dataTransfer.dropEffect;

Values

A DOMString representing the drag operation effect. The possible values are:

copy
A copy of the source item is made at the new location.
move
An item is moved to a new location.
link
A link is established to the source at the new location.
none
The item may not be dropped.

Assigning any other value to dropEffect has no effect and the old value is retained.

Example

This example shows the use of the dropEffect and effectAllowed properties.

HTML Content

<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 Content

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

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

#target {
  border: 1px solid black;
}

JavaScript Content

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

Specifications

Specification Status Comment
HTML Living Standard
dropEffect
Living Standard  
HTML 5.1
dropEffect
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dropEffectChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

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

See also

文档标签和贡献者

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