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

DataTransfer.setData() 方法用来设置拖放操作的{{domxref("DataTransfer","drag data")}}到指定的数据和类型。

+ +

如果给定类型的数据不存在，则将其添加到拖动数据存储的末尾，使得 {{domxref("DataTransfer.types","types")}} 列表中的最后一个项目将是新类型。

+ +

如果给定类型的数据已经存在，现有数据将被替换为相同的位置。也就是说，替换相同类型的数据时 {{domxref("DataTransfer.types","types")}}列表的顺序不会更改。

+ +

示例数据类型为："text/plain" 和 "text/uri-list".

+ +

语法

+ +
void dataTransfer.setData(format, data);
+
+ +

参数

+ +
+
format
+
一个{{domxref("DOMString")}} 表示要添加到 {{domxref("DataTransfer","drag object")}}的拖动数据的类型。
+
data
+
一个 {{domxref("DOMString")}}表示要添加到 {{domxref("DataTransfer","drag object")}}的数据。
+
+ +

返回值

+ +
+
void
+
+ +

示例

+ +

 

+ +

此示例显示了使用 {{domxref("DataTransfer")}} 对象的 {{domxref("DataTransfer.getData","getData()")}}, {{domxref("DataTransfer.setData","setData()")}} }和{{domxref("DataTransfer.clearData","clearData()")}} 方法。

+ +
<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>DataTransfer.setData()/.getData()/.clearData()</title>
+    <style>
+        div {
+            margin: 0em;
+            padding: 2em;
+        }
+        #source {
+            color: blue;
+            border: 1px solid black;
+        }
+        #target {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+<body>
+    <section>
+        <h1>
+            <code>DataTransfer.setData()</code> <br>
+            <code>DataTransfer.getData()</code> <br>
+            <code>DataTransfer.clearData()</code>
+        </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>
+    </section>
+    <!-- js -->
+    <script>
+        function dragstart_handler(ev) {
+            console.log("dragStart");
+            // Change the source element's background color to signify drag has started
+            ev.currentTarget.style.border = "dashed";
+            // Set the drag's format and data. Use the event target's id for the data
+            ev.dataTransfer.setData("text/plain", ev.target.id);
+        }
+
+        function dragover_handler(ev) {
+            console.log("dragOver");
+            // prevent Default event
+            ev.preventDefault();
+        }
+
+        function drop_handler(ev) {
+            console.log("Drop");
+            ev.preventDefault();
+            // Get the data, which is the id of the drop target
+            var data = ev.dataTransfer.getData("text");
+            // appendChild
+            ev.target.appendChild(document.getElementById(data));
+            // Clear the drag data cache (for all formats/types)
+            ev.dataTransfer.clearData();
+        }
+    </script>
+</body>
+</html>
+
+
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-setdata", "setData()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-setdata", "setData()")}}{{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}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

也可以看看

+ +

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

-- cgit v1.2.3-54-g00ecf