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/effectallowed/index.html | 189 +++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 files/zh-cn/web/api/datatransfer/effectallowed/index.html (limited to 'files/zh-cn/web/api/datatransfer/effectallowed') diff --git a/files/zh-cn/web/api/datatransfer/effectallowed/index.html b/files/zh-cn/web/api/datatransfer/effectallowed/index.html new file mode 100644 index 0000000000..ec2e64eee3 --- /dev/null +++ b/files/zh-cn/web/api/datatransfer/effectallowed/index.html @@ -0,0 +1,189 @@ +--- +title: DataTransfer.effectAllowed +slug: Web/API/DataTransfer/effectAllowed +translation_of: Web/API/DataTransfer/effectAllowed +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

DataTransfer.effectAllowed 属性指定拖放操作所允许的一个效果。copy 操作用于指示被拖动的数据将从当前位置复制到放置位置。move操作用于指定被拖动的数据将被移动。 link操作用于指示将在源和放置位置之间创建某种形式的关系或连接。

+ +

应该在{{event("dragstart")}}事件中设置此属性，以便为拖动源设置所需的拖动效果。在 {{event("dragenter")}} 和{{event("dragover")}} 事件处理程序中，该属性将设置为在{{event("dragstart")}} 事件期间分配的任何值，因此，可以使用effectAllowed来确定允许哪个效果。

+ +

给effectAllowed赋一个值，以使其在除{{event("dragstart")}} 之外的事件中无效。

+ +

语法

+ +
dataTransfer.effectAllowed;
+
+ +

值

+ +

表示允许的拖动操作{{domxref("DOMString")}} 。这个可能值是：

+ +
+
none
+
此项表示不允许放下
+
copy
+
源项目的复制项可能会出现在新位置。
+
copyLink
+
允许 copy 或者 link 操作。
+
copyMove
+
允许 copy 或者 move 操作。
+
link
+
可以在新地方建立与源的链接。
+
linkMove
+
允许 link 或者 move 操作。
+
move
+
一个项目可能被移动到新位置。
+
all
+
允许所有的操作。
+
uninitialized
+
效果没有设置时的默认值，则等同于 all。
+
+ +

分配一个没有效果的其他值给 effectAllowed，则保留原值。

+ +

Internet Explorer 会将该值改为小写。因此，linkMove将会变为linkmove ，等等。

+ +

举个例子

+ +

此例子展示 effectAllowed 用法 和 {{domxref("DataTransfer.dropEffect", "dropEffect")}} 属性

+ +
<!DOCTYPE html>
+<html lang=en>
+<title>Examples of DataTransfer.{dropEffect,effectAllowed} properties</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+<script>
+function dragstart_handler(ev) {
+ console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
+ // 将这个元素的id添加到drag载荷中，
+ // 以便drop事件知道将哪个元素添加到其树中。
+ 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();
+ // 得到目标的id并且将移动的元素添加到目标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();
+ // 设置 dropEffect 为 move
+ ev.dataTransfer.dropEffect = "move"
+}
+</script>
+<body>
+<h1>Examples <code>DataTransfer</code>.{<code>dropEffect</code>, <code>effectAllowed</code>} properties</h1>
+ <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>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-effectallowed", "effectAllowed")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-effectallowed", "effectAllowed")}}{{Spec2("HTML5.1")}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}3.510123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

参考链接

+ +

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

-- cgit v1.2.3-54-g00ecf