From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/datatransfer/dropeffect/index.html | 131 +++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/zh-cn/web/api/datatransfer/dropeffect/index.html (limited to 'files/zh-cn/web/api/datatransfer/dropeffect') diff --git a/files/zh-cn/web/api/datatransfer/dropeffect/index.html b/files/zh-cn/web/api/datatransfer/dropeffect/index.html new file mode 100644 index 0000000000..e6c14a9e4a --- /dev/null +++ b/files/zh-cn/web/api/datatransfer/dropeffect/index.html @@ -0,0 +1,131 @@ +--- +title: DataTransfer.dropEffect +slug: Web/API/DataTransfer/dropEffect +translation_of: Web/API/DataTransfer/dropEffect +--- +
 {{APIRef("HTML Drag and Drop API")}}
+ +

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

+ +

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

+ +

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

+ +

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

+ +

语法

+ +
dataTransfer.dropEffect;
+
+ +

值

+ +

一个代表拖动操作效果的{{domxref("DOMString")}}，可能的值有：

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

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

+ +

示例

+ +

这个例子演示了dropEffect 和 {{domxref("DataTransfer.effectAllowed","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"
+}
+
+ +

{{EmbedLiveSample('Example', 300, 250)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-dropeffect','dropEffect')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-dropeffect','dropEffect')}}{{Spec2('HTML5.1')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.DataTransfer.dropEffect")}}

+ +

另见

+ +

{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}

-- cgit v1.2.3-54-g00ecf