initial commit

1 files changed, 196 insertions, 0 deletions

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
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><strong><code>DataTransfer.setData()</code></strong> 方法用来设置拖放操作的{{domxref("DataTransfer","drag data")}}到指定的数据和类型。</p>
+
+<p>如果给定类型的数据不存在，则将其添加到拖动数据存储的末尾，使得 {{domxref("DataTransfer.types","types")}} 列表中的最后一个项目将是新类型。</p>
+
+<p>如果给定类型的数据已经存在，现有数据将被替换为相同的位置。也就是说，替换相同类型的数据时 {{domxref("DataTransfer.types","types")}}列表的顺序不会更改。</p>
+
+<p>示例数据类型为："<code>text/plain</code>" 和 "<code>text/uri-list</code>".</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">void <var>dataTransfer</var>.setData(format, data);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em>format</em></dt>
+ <dd>一个{{domxref("DOMString")}} 表示要添加到 {{domxref("DataTransfer","drag object")}}的拖动数据的类型。</dd>
+ <dt><em>data</em></dt>
+ <dd>一个 {{domxref("DOMString")}}表示要添加到 {{domxref("DataTransfer","drag object")}}的数据。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<dl>
+ <dt>void</dt>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p> </p>
+
+<p>此示例显示了使用 {{domxref("DataTransfer")}} 对象的 {{domxref("DataTransfer.getData","getData()")}}, {{domxref("DataTransfer.setData","setData()")}} }和{{domxref("DataTransfer.clearData","clearData()")}} 方法。</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="zh-CN"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;DataTransfer.setData()/.getData()/.clearData()&lt;/title&gt;
+    &lt;style&gt;
+        div {
+            margin: 0em;
+            padding: 2em;
+        }
+        #source {
+            color: blue;
+            border: 1px solid black;
+        }
+        #target {
+            border: 1px solid black;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;section&gt;
+        &lt;h1&gt;
+            &lt;code&gt;DataTransfer.setData()&lt;/code&gt; &lt;br&gt;
+            &lt;code&gt;DataTransfer.getData()&lt;/code&gt; &lt;br&gt;
+            &lt;code&gt;DataTransfer.clearData()&lt;/code&gt;
+        &lt;/h1&gt;
+        &lt;div&gt;
+            &lt;p id="source" ondragstart="dragstart_handler(event);" draggable="true"&gt;
+                Select this element, drag it to the Drop Zone and then release the selection to move the element.
+            &lt;/p&gt;
+        &lt;/div&gt;
+        &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;
+            Drop Zone
+        &lt;/div&gt;
+    &lt;/section&gt;
+    &lt;!-- js --&gt;
+    &lt;script&gt;
+        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();
+        }
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+
+
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-setdata", "setData()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-setdata", "setData()")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="也可以看看">也可以看看</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>