initial commit

11 files changed, 1652 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/datatransfer/cleardata/index.html b/files/zh-cn/web/api/datatransfer/cleardata/index.html
new file mode 100644
index 0000000000..66f518db63
--- /dev/null
+++ b/files/zh-cn/web/api/datatransfer/cleardata/index.html
@@ -0,0 +1,237 @@
+---
+title: DataTransfer.clearData()
+slug: Web/API/DataTransfer/clearData
+tags:
+  - DataTransfer.clearData()
+translation_of: Web/API/DataTransfer/clearData
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><strong><code>DataTransfer.clearData()</code></strong> 方法删除给定类型的拖动操作的{{domxref("DataTransfer","drag data")}}。如果给定类型的数据不存在，则此方法不执行任何操作。</p>
+
+<p class="note">如果没有参数调用此方法，或者格式为空 ，则将删除所有类型的数据。</p>
+
+<p>此方法不会从拖动操作中删除文件，因此如果有任何文件包含在对象的{{domxref("DataTransfer.types")}}列表中，仍然可能有一个类型为“Files”的条目在拖动。 </p>
+
+<div class="note">
+<p>该方法只能在{{event("dragstart")}} 事件的处理程序中使用，因为这是拖动操作的数据存储只能写入的时间。</p>
+</div>
+
+<h2 id="句法">句法</h2>
+
+<pre class="syntaxbox"><var>DataTransfer</var>.clearData([<em>format</em>]);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>format</code> {{optional_inline}}</dt>
+ <dd>一个 {{domxref("DOMString","string")}}指定要删除的数据类型。如果此参数为空字符串或未提供，则将删除所有类型的数据。</dd>
+</dl>
+
+<h2 id="范例">范例</h2>
+
+<p>这个例子显示了使用{{domxref("DataTransfer")}}对象的{{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} 和{{domxref("DataTransfer.clearData()","clearData()")}} 和</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span class="tweaked" id="source" draggable="true"&gt;
+  Select this element, drag it to the Drop Zone and then release the selection to move the element.
+&lt;/span&gt;
+&lt;span class="tweaked" id="target"&gt;Drop Zone&lt;/span&gt;
+&lt;div&gt;Status: &lt;span id="status"&gt;Drag to start&lt;/span&gt;&lt;/div&gt;
+&lt;div&gt;Data is: &lt;span id="data"&gt;uninitialized&lt;/span&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span.tweaked {
+  display: inline-block;
+  margin: 1em 0;
+  padding: 1em 2em;
+}
+
+#source {
+  color: blue;
+  border: 1px solid black;
+}
+
+#target {
+  border: 1px solid black;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">window.addEventListener('DOMContentLoaded', function () {
+  // Select HTML elements
+  var draggable = document.getElementById('source');
+  var dropable = document.getElementById('target');
+  var status = document.getElementById('status');
+  var data = document.getElementById('data');
+  var dropped = false;
+
+  // Register event handlers
+  draggable.addEventListener('dragstart', dragStartHandler);
+  draggable.addEventListener('dragend', dragEndHandler);
+  dropable.addEventListener('dragover', dragOverHandler);
+  dropable.addEventListener('dragleave', dragLeaveHandler);
+  dropable.addEventListener('drop', dropHandler);
+
+  function dragStartHandler (event) {
+    status.innerHTML = 'Drag in process';
+
+    // Change target element's border to signify drag has started
+    event.currentTarget.style.border = '1px dashed blue';
+
+    // Start by clearing existing clipboards; this will affect all types since we
+    // don't give a specific type.
+
+    event.dataTransfer.clearData();
+
+    // Set the drag's format and data (use event target's id for data)
+    event.dataTransfer.setData('text/plain', event.target.id);
+
+    data.innerHTML = event.dataTransfer.getData('text/plain');
+  }
+
+  function dragEndHandler (event) {
+    if (!dropped) {
+      status.innerHTML = 'Drag canceled';
+    }
+
+    data.innerHTML = event.dataTransfer.getData('text/plain') || 'empty';
+
+    // Change border to signify drag is no longer in process
+    event.currentTarget.style.border = '1px solid black';
+
+    if (dropped) {
+      // Remove all event listeners
+      draggable.removeEventListener('dragstart', dragStartHandler);
+      draggable.removeEventListener('dragend', dragEndHandler);
+      dropable.removeEventListener('dragover', dragOverHandler);
+      dropable.removeEventListener('dragleave', dragLeaveHandler);
+      dropable.removeEventListener('drop', dropHandler);
+    }
+  }
+
+  function dragOverHandler (event) {
+    status.innerHTML = 'Drop available';
+
+    event.preventDefault();
+  }
+
+  function dragLeaveHandler (event) {
+    status.innerHTML = 'Drag in process (drop was available)';
+
+    event.preventDefault();
+  }
+
+  function dropHandler (event) {
+    dropped = true;
+
+    status.innerHTML = 'Drop done';
+
+    event.preventDefault();
+
+    // Get data linked to event format « text »
+    var _data = event.dataTransfer.getData('text/plain');
+    var element = document.getElementById(_data);
+
+    // Append drag source element to event's target element
+    event.target.appendChild(element);
+
+    // Change CSS styles and displayed text
+    element.style.cssText = 'border: 1px solid black;display: block; color: red';
+    element.innerHTML = "I'm in the Drop Zone!";
+  }
+})
+</pre>
+
+<p>{{EmbedLiveSample('Example', 300, 250)}}</p>
+
+<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-cleardata','DataTransfer.clearData()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</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>{{CompatGeckoDesktop("1.9.1")}}</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>
diff --git a/files/zh-cn/web/api/datatransfer/datatransfer/index.html b/files/zh-cn/web/api/datatransfer/datatransfer/index.html
new file mode 100644
index 0000000000..2655af1de2
--- /dev/null
+++ b/files/zh-cn/web/api/datatransfer/datatransfer/index.html
@@ -0,0 +1,47 @@
+---
+title: DataTransfer()
+slug: Web/API/DataTransfer/DataTransfer
+tags:
+  - API
+  - Constructor
+  - DataTransfer
+translation_of: Web/API/DataTransfer/DataTransfer
+---
+<p>{{APIRef("HTML Drag and Drop API")}}</p>
+
+<p>通过构造函数 <strong><code>DataTransfer</code></strong> 创建一个新的 {{domxref("DataTransfer")}} 对象。注意，单独创建该对象没有意义，且Internet Explorer中 <code>DataTransfer</code> 不是一个构造函数。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>dataTrans</em> = new DataTransfer()</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>无</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个空的 <code>DataTransfer</code> 对象。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#the-datatransfer-interface','DataTransfer')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据，请访问 https://github.com/mdn/browser-compat-data 并向我们发送一个请求。</div>
+
+<p>{{Compat("api.DataTransfer.DataTransfer")}}</p>
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
+---
+<div> {{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><strong><code>DataTransfer.dropEffect</code></strong> 属性控制在拖放操作中给用户的反馈（通常是视觉上的）。它会影响在拖拽过程中光标的手势。例如，当用户 hover 在一个放置目标元素上，浏览器的光标可能会预示了将会发生什么操作。</p>
+
+<p>当 {{domxref("DataTransfer")}} 被创建时， <code>dropEffect</code> 被设置为一个字符串。读这个值时会返回它的当前值。设置这个值时，如果这个新的值是下面列出的值中的一个，这个属性的值就会被设置为这个新的值，其他的值都会被忽略。</p>
+
+<p>对于 {{event("dragenter")}} 和 {{event("dragover")}} 事件， <code>dropEffect</code> 会根据用户的请求的行为进行初始化。具体如何初始化和浏览器平台有关，但是通常来讲，用户可以通过按住修改键，比如 alt 键来修改想要的行为。当我们期望得到一个指定的行为时而不是用户的请求行为时，可以通过 {{event("dragenter")}} 和 {{event("dragover")}} 事件处理修改 <code>dropEffect</code>  的值。</p>
+
+<p>对于 {{event("drop")}} 和 {{event("dragend")}} 事件，<code>dropEffect</code> 会被设置为想要得到的值，即最后一次 {{event("dragenter")}} 或 {{event("dragover")}} 事件后 <code>dropEffect</code> 的值。例如，在一个 {{event("dragend")}} 事件中，如果期望得到的 dropEffect 是 “move”，那么被拖拽的数据会从源中移除。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>dataTransfer</var>.dropEffect;
+</pre>
+
+<h3 id="值">值</h3>
+
+<p>一个代表拖动操作效果的{{domxref("DOMString")}}，可能的值有：</p>
+
+<dl>
+ <dt><code>copy</code></dt>
+ <dd>在新位置生成源项的副本</dd>
+ <dt><code>move</code></dt>
+ <dd>将项目移动到新位置</dd>
+ <dt><code>link</code></dt>
+ <dd>在新位置建立源项目的链接</dd>
+ <dt><code>none</code></dt>
+ <dd>项目可能禁止拖放（译者注：还与effectAllowed设置的值相关）</dd>
+</dl>
+
+<p>将任何其他值赋给<code>dropEffect</code> 都没有效果，这种情况下会保留旧值。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>这个例子演示了<code>dropEffect</code> 和 {{domxref("DataTransfer.effectAllowed","effectAllowed")}}属性的用法</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&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;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  margin: 0em;
+  padding: 2em;
+}
+
+#source {
+  color: blue;
+  border: 1px solid black;
+}
+
+#target {
+  border: 1px solid black;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">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"
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example', 300, 250)}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-dropeffect','dropEffect')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-dropeffect','dropEffect')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.DataTransfer.dropEffect")}}</p>
+
+<h2 id="另见">另见</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
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
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><strong><code>DataTransfer.effectAllowed</code></strong> 属性指定拖放操作所允许的一个效果。<em>copy</em> 操作用于指示被拖动的数据将从当前位置复制到放置位置。<em>move操作用于指定被拖动的数据将被移动。 link</em>操作用于指示将在源和放置位置之间创建某种形式的关系或连接。</p>
+
+<p>应该在{{event("dragstart")}}事件中设置此属性，以便为拖动源设置所需的拖动效果。在 {{event("dragenter")}} 和{{event("dragover")}} 事件处理程序中，该属性将设置为在{{event("dragstart")}} 事件期间分配的任何值，因此，可以使用<code>effectAllowed</code>来确定允许哪个效果。</p>
+
+<p>给<code>effectAllowed</code>赋一个值，以使其在除{{event("dragstart")}} 之外的事件中无效。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>dataTransfer</var>.effectAllowed;
+</pre>
+
+<h3 id="值">值</h3>
+
+<p>表示允许的拖动操作{{domxref("DOMString")}} 。这个可能值是：</p>
+
+<dl>
+ <dt>none</dt>
+ <dd>此项表示不允许放下</dd>
+ <dt>copy</dt>
+ <dd>源项目的复制项可能会出现在新位置。</dd>
+ <dt>copyLink</dt>
+ <dd>允许 <em>copy</em> 或者 <em>link</em> 操作。</dd>
+ <dt>copyMove</dt>
+ <dd>允许 <em>copy</em> 或者 <em>move</em> 操作。</dd>
+ <dt>link</dt>
+ <dd>可以在新地方建立与源的链接。</dd>
+ <dt>linkMove</dt>
+ <dd>允许 <em>link</em> 或者 <em>move</em> 操作。</dd>
+ <dt>move</dt>
+ <dd>一个项目可能被移动到新位置。</dd>
+ <dt>all</dt>
+ <dd>允许所有的操作。</dd>
+ <dt>uninitialized</dt>
+ <dd>效果没有设置时的默认值，则等同于 <em>all</em>。</dd>
+</dl>
+
+<p>分配一个没有效果的其他值给 <code>effectAllowed</code>，则保留原值。</p>
+
+<p>Internet Explorer 会将该值改为小写。因此，<code>linkMove</code>将会变为<code>linkmove</code> ，等等。</p>
+
+<h2 id="举个例子">举个例子</h2>
+
+<p>此例子展示 <code>effectAllowed</code> 用法 和 {{domxref("DataTransfer.dropEffect", "dropEffect")}} 属性</p>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html lang=en&gt;
+&lt;title&gt;Examples of DataTransfer.{dropEffect,effectAllowed} properties&lt;/title&gt;
+&lt;meta content="width=device-width"&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;script&gt;
+function dragstart_handler(ev) {
+ console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
+ <code>// 将这个元素的id添加到drag载荷中，
+ // 以便drop事件知道将哪个元素添加到其树中。</code>
+ 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();
+ <code>// 得到目标的id并且将移动的元素添加到目标DOM中</code>
+ 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"
+}
+&lt;/script&gt;
+&lt;body&gt;
+&lt;h1&gt;Examples &lt;code&gt;DataTransfer&lt;/code&gt;.{&lt;code&gt;dropEffect&lt;/code&gt;, &lt;code&gt;effectAllowed&lt;/code&gt;} properties&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;/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-effectallowed", "effectAllowed")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-effectallowed", "effectAllowed")}}</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>{{CompatUnknown}}</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>
diff --git a/files/zh-cn/web/api/datatransfer/files/index.html b/files/zh-cn/web/api/datatransfer/files/index.html
new file mode 100644
index 0000000000..f6862d8b74
--- /dev/null
+++ b/files/zh-cn/web/api/datatransfer/files/index.html
@@ -0,0 +1,110 @@
+---
+title: DataTransfer.files
+slug: Web/API/DataTransfer/files
+translation_of: Web/API/DataTransfer/files
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><strong><code>DataTransfer.files</code></strong>属性在拖动操作中表示{{domxref("FileList","文件列表")}}。如果操作不包含文件，则此列表为空。</p>
+
+<p>此功能可用于将文件从用户桌面拖动到浏览器。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>dataTransfer</var>.files;
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>拖动操作中的文件{{domxref("FileList","列表")}}，操作中每个文件的一个列表项。 如果拖动操作没有文件，此列表为空。</p>
+
+<h2 id="举个例子">举个例子</h2>
+
+<p>这个接口有两个实例:</p>
+
+<ul>
+ <li>只针对Firfox: <a class="external" href="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li>
+ <li>所有浏览器: <a class="external" href="https://jsbin.com/hiqasek/edit?html,js,output">https://jsbin.com/hiqasek/</a></li>
+</ul>
+
+<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-files", "files")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}</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>
diff --git a/files/zh-cn/web/api/datatransfer/getdata/index.html b/files/zh-cn/web/api/datatransfer/getdata/index.html
new file mode 100644
index 0000000000..6e8916bb16
--- /dev/null
+++ b/files/zh-cn/web/api/datatransfer/getdata/index.html
@@ -0,0 +1,111 @@
+---
+title: DataTransfer.getData()
+slug: Web/API/DataTransfer/getData
+translation_of: Web/API/DataTransfer/getData
+---
+<div>
+<p>{{APIRef("HTML DOM")}}</p>
+</div>
+
+<p><strong><code>DataTransfer.getData()</code></strong> 方法接受指定类型的拖放（以{{domxref("DOMString")}}的形式）数据。如果拖放行为没有操作任何数据，会返回一个空字符串。</p>
+
+<p>数据类型有：<code>text/plain</code>，<code>text/uri-list。</code></p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">DOMString <var>dataTransfer</var>.getData(format);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em>format</em></dt>
+ <dd>{{domxref("DOMString")}}类型</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<dl>
+ <dt>{{domxref("DOMString")}}</dt>
+ <dd>返回一个给定类型的{{domxref("DOMString")}}格式的数据。如果没有操作数据或者没有指定操作数据的类型，都会返回一个空字符串。</dd>
+</dl>
+
+<h3 id="注意">注意</h3>
+
+<p><a href="https://www.w3.org/TR/2011/WD-html5-20110113/dnd.html#drag-data-store-mode">HTML5 拖放规范</a> 规定了一个 <code>drag data store mode</code>。这可能会导致预期外的结果，即 <strong><code>DataTransfer.getData()</code> </strong>没有返回预期值。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>这个例子展示了 {{domxref("DataTransfer")}}对象的{{domxref("DataTransfer.getData()","getData()")}}和{{domxref("DataTransfer.setData()","setData()")}}方法。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
+    &lt;span id="drag" draggable="true" ondragstart="drag(event)"&gt;drag me to the other box&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1, #div2 {
+    width:100px;
+    height:50px;
+    padding:10px;
+    border:1px solid #aaaaaa;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function allowDrop(allowdropevent) {
+    allowdropevent.target.style.color = 'blue';
+    allowdropevent.preventDefault();
+}
+
+function drag(dragevent) {
+    dragevent.dataTransfer.setData("text", dragevent.target.id);
+    dragevent.target.style.color = 'green';
+}
+
+function drop(dropevent) {
+    dropevent.preventDefault();
+    var data = dropevent.dataTransfer.getData("text");
+    dropevent.target.appendChild(document.getElementById(data));
+    document.getElementById("drag").style.color = 'black';
+}
+</pre>
+
+<h3 id="结果">结果</h3>
+
+<p id="EmbedLiveSample('Example'_''_''_''_'WebAPIDataTransfergetData')"><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/DataTransfer/getData$samples/Example?revision=1539300" width="600"></iframe></p>
+
+<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-getdata", "getData()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="兼容性">兼容性</h2>
+
+<p>{{Compat("api.DataTransfer.getData")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
diff --git a/files/zh-cn/web/api/datatransfer/index.html b/files/zh-cn/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..aa2d75397e
--- /dev/null
+++ b/files/zh-cn/web/api/datatransfer/index.html
@@ -0,0 +1,148 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+tags:
+  - API
+  - DataTransfer
+  - HTML Drag and Drop API
+  - NeedsMarkupWork
+  - Web Development
+  - 参考
+  - 复制粘贴
+  - 拖放
+  - 接口
+translation_of: Web/API/DataTransfer
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p><code>DataTransfer</code> 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。关于拖放的更多信息，请参见 <a class="internal" href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag and Drop">Drag and Drop</a>.</p>
+
+<p>这个对象可以从所有拖动事件 {{domxref("DragEvent","drag events")}} 的 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 属性上获取。</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<p>{{domxref("DataTransfer.DataTransfer","DataTransfer()")}}</p>
+
+<dl>
+ <dd>生成并且返回一个新的 <code>DataTransfer</code> 对象。</dd>
+</dl>
+
+<h2 id="属性">属性</h2>
+
+<h3 id="标准属性">标准属性</h3>
+
+<dl>
+ <dt>{{domxref("DataTransfer.dropEffect")}}</dt>
+ <dd>获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为  <code>none</code>, <code>copy</code>, <code>link</code> 或 <code>move</code>。</dd>
+ <dt>{{domxref("DataTransfer.effectAllowed")}}</dt>
+ <dd>提供所有可用的操作类型。必须是  <code>none</code>, <code>copy</code>, <code>copyLink</code>, <code>copyMove</code>, <code>link</code>, <code>linkMove</code>, <code>move</code>, <code>all</code> or <code>uninitialized</code> 之一。</dd>
+ <dt>{{domxref("DataTransfer.files")}}</dt>
+ <dd>包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。</dd>
+ <dt>{{domxref("DataTransfer.items")}} {{readonlyInline}}</dt>
+ <dd>提供一个包含所有拖动数据列表的 {{domxref("DataTransferItemList")}} 对象。</dd>
+ <dt>{{domxref("DataTransfer.types")}} {{readonlyInline}}</dt>
+ <dd>一个提供 {{event("dragstart")}} 事件中设置的格式的 {{domxref("DOMString","strings")}} 数组。</dd>
+</dl>
+
+<h3 id="Gecko_属性">Gecko 属性</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="note"><strong>注意：</strong>本节中的所有属性为 Gecko 特有。</div>
+
+<dl>
+ <dt>{{domxref("DataTransfer.mozCursor")}}</dt>
+ <dd>给出拖动光标的状态。这主要用于在拖动期间控制光标。</dd>
+ <dt>{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}</dt>
+ <dd>按下鼠标按钮按下启动拖动操作时鼠标光标所在的 {{ domxref("Node") }} 。对于外部拖动或调用方无法访问节点，此值为  <code>null</code> 。</dd>
+ <dt>{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}</dt>
+ <dd>此属性仅适用于 <code>dragend</code> 事件，如果通过用户按下 escape 取消拖动操作，则为 <code>true</code> 。在所有其他情况下，这将为 <code>false</code> ，包括由于其他原因（如，放置在无效位置）导致的拖动失败。</dd>
+ <dt>
+ <h3 id="不推荐的属性">不推荐的属性</h3>
+ </dt>
+ <dt>{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>提供拖动操作中的项目数。在Firefox71中删除。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<h3 id="标准方法">标准方法</h3>
+
+<dl>
+ <dt>{{domxref("DataTransfer.clearData()")}}</dt>
+ <dd>删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，则删除与所有类型关联的数据。如果指定类型的数据不存在，或者 data transfer 中不包含任何数据，则该方法不会产生任何效果。</dd>
+ <dt>{{domxref("DataTransfer.getData()")}}</dt>
+ <dd>检索给定类型的数据，如果该类型的数据不存在或 data transfer不包含数据，则返回空字符串。</dd>
+ <dt>{{domxref("DataTransfer.setData()")}}</dt>
+ <dd>设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。</dd>
+ <dt>{{domxref("DataTransfer.setDragImage()")}}</dt>
+ <dd>用于设置自定义的拖动图像。</dd>
+</dl>
+
+<h3 id="Gecko_方法">Gecko 方法</h3>
+
+<p>{{Non-standard_header()}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong>本节所有方法为 Gecko 专有。</p>
+</div>
+
+<dl>
+ <dt>{{domxref("DataTransfer.addElement()")}}</dt>
+ <dd>Sets the drag source to the given element.</dd>
+</dl>
+
+<h3 id="不推荐的方法">不推荐的方法</h3>
+
+<dl>
+ <dt>{{domxref("DataTransfer.mozClearDataAt()")}} {{deprecated_inline}}</dt>
+ <dd>Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one. Removed in Firefox 71.</dd>
+ <dt>{{domxref("DataTransfer.mozGetDataAt()")}} {{deprecated_inline}}</dt>
+ <dd>Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one. Removed in Firefox 71.</dd>
+ <dt>{{domxref("DataTransfer.mozSetDataAt()")}} {{deprecated_inline}}</dt>
+ <dd>A data transfer may store multiple items, each at a given zero-based index. <code>mozSetDataAt()</code> may only be called with an index argument less than <code>mozItemCount</code> in which case an existing item is modified, or equal to <code>mozItemCount</code> in which case a new item is added, and the <code>mozItemCount</code> is incremented by one. Removed in Firefox 71.</dd>
+ <dt>{{domxref("DataTransfer.mozTypesAt()")}} {{deprecated_inline}}</dt>
+ <dd>Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned. Removed in Firefox 71.</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>本文档中的每个方法和属性都有自己的参考页面，每个参考页面中都直接包含了接口的示例或给出了示例的链接。</p>
+
+<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#datatransfer','DataTransfer')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><code>mozCursor</code>, <code>mozItemCount</code>, <code>mozSourceNode</code>, <code>mozUserCancelled</code>, <code>addElement()</code>, <code>mozClearDataAt()</code>, <code>mozGetDataAt()</code>, <code>mozSetDataAt()</code> and <code>mozTypesAt</code> are Gecko specific.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.DataTransfer")}}</p>
+
+<h2 id="See_also" name="See_also">参见</h2>
+
+<ul>
+ <li><a class="internal" href="/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API">拖与放</a></li>
+ <li><a href="HTML_Drag_and_Drop_API/Drag_operations">拖动操作</a></li>
+ <li><a href="HTML_Drag_and_Drop_API/Recommended_drag_types">推荐拖动类型</a></li>
+ <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items">拖动多项</a></li>
+ <li><a href="https://codepen.io/tech_query/pen/MqGgap">DataTransfer 测试 - 粘贴、拖放</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/datatransfer/items/index.html b/files/zh-cn/web/api/datatransfer/items/index.html
new file mode 100644
index 0000000000..27fadf40d5
--- /dev/null
+++ b/files/zh-cn/web/api/datatransfer/items/index.html
@@ -0,0 +1,113 @@
+---
+title: DataTransfer.items
+slug: Web/API/DataTransfer/items
+translation_of: Web/API/DataTransfer/items
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>{{domxref("DataTransfer")}}的<code>items</code> 属性只读，是拖动操作中 {{domxref("DataTransferItem","数据传输项")}}的{{domxref("DataTransferItemList","列表")}}。该列表包含了操作中每一项目的对应项，如果操作没有项目，则列表为空。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>itemList</em> = <em>dataTransfer</em>.items;
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个{{domxref("DataTransferItemList")}} 对象，包含了表示拖动操作中被拖动项的{{domxref("DataTransferItem")}}对象，每一个拖动项对应一个列表项。如果拖动操作中没有数据，则列表为空。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>这个例子演示了 <code>items</code> 和 {{domxref("DataTransfer.types","types")}} 属性的用法.</p>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html lang=en&gt;
+&lt;title&gt;Examples of DataTransfer.{types,items} properties&lt;/title&gt;
+&lt;meta content="width=device-width"&gt;
+&lt;style&gt;
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #target {
+    border: 1px solid black;
+  }
+&lt;/style&gt;
+&lt;script&gt;
+function dragstart_handler(ev) {
+ console.log("dragStart: target.id = " + ev.target.id);
+ // 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/plain", ev.target.id);
+ ev.dataTransfer.effectAllowed = "move";
+}
+
+function drop_handler(ev) {
+ console.log("drop: target.id = " + ev.target.id);
+ 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));
+ // Print each format type
+ if (ev.dataTransfer.types != null) {
+   for (var i=0; i &lt; ev.dataTransfer.types.length; i++) {
+     console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
+   }
+ }
+ // Print each item's "kind" and "type"
+ if (ev.dataTransfer.items != null) {
+   for (var i=0; i &lt; ev.dataTransfer.items.length; i++) {
+     console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
+   }
+ }
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+ // Set the dropEffect to move
+ ev.dataTransfer.dropEffect = "move"
+}
+&lt;/script&gt;
+&lt;body&gt;
+&lt;h1&gt;Examples of &lt;code&gt;DataTransfer&lt;/code&gt;.{&lt;code&gt;types&lt;/code&gt;, &lt;code&gt;items&lt;/code&gt;} properties&lt;/h1&gt;
+ &lt;ul&gt;
+   &lt;li id="i1" ondragstart="dragstart_handler(event);" draggable="true"&gt;Drag Item 1 to the Drop Zone&lt;/li&gt;
+   &lt;li id="i2" ondragstart="dragstart_handler(event);" draggable="true"&gt;Drag Item 2 to the Drop Zone&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-items", "items")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-items", "items")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.DataTransfer.items")}}</p>
+
+<h2 id="另见">另见</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
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>
diff --git a/files/zh-cn/web/api/datatransfer/setdragimage/index.html b/files/zh-cn/web/api/datatransfer/setdragimage/index.html
new file mode 100644
index 0000000000..29550800b6
--- /dev/null
+++ b/files/zh-cn/web/api/datatransfer/setdragimage/index.html
@@ -0,0 +1,193 @@
+---
+title: DataTransfer.setDragImage()
+slug: Web/API/DataTransfer/setDragImage
+translation_of: Web/API/DataTransfer/setDragImage
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<div></div>
+
+<p>发生拖动时，从拖动目标({{event("dragstart")}}事件触发的元素)生成半透明图像，并在拖动过程中跟随鼠标指针。这个图片是自动创建的，你不需要自己去创建它。然而，如果想要设置为自定义图像，那么 <strong><code>DataTransfer.setDragImage()</code></strong> 方法就能派上用场。</p>
+
+<p>图像通常是一个 {{HTMLElement("image")}} 元素，但也可以是{{HTMLElement("canvas")}} 或任何其他图像元素。该方法的x和y坐标是图像应该相对于鼠标指针出现的偏移量。</p>
+
+<p>坐标指定鼠标指针相对于图片的偏移量。例如，要使图像居中，请使用图像宽度和高度的一半。</p>
+
+<p>通常在  {{event("dragstart")}} 事件处理程序中调用此方法。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox notranslate">void <em>dataTransfer</em>.setDragImage(img, xOffset, yOffset);
+</pre>
+
+<h3 id="参数">  参数</h3>
+
+<dl>
+ <dt><em>img | </em>Element</dt>
+ <dd>用于拖曳反馈图像的图像 {{domxref("Element")}} 元素。</dd>
+</dl>
+
+<p>     如果Element是一个img元素，则将拖动位图设置为该元素的图像（保持大小）；否则，将拖动数位图设置为从给定元素所生成的图片（<a href="https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface">当前尚未指定执行此操作的确切机制</a>）</p>
+
+<dl>
+ <dt><em>xOffset</em></dt>
+ <dd>使用 <code>long</code> 指示相对于图片的横向偏移量</dd>
+ <dt><em>yOffset</em></dt>
+ <dd>使用 <code>long</code> 指示相对于图片的纵向偏移量
+
+ </dd>
+</dl>
+
+<h3 id="Return_Value" name="Return_Value">返回值</h3>
+
+<dl>
+ <dt>void</dt>
+ <dd></dd>
+</dl>
+
+<h2 id="举个例子">举个例子</h2>
+
+<p> 这个例子展示如何使用 <code>setDragImage()</code> 方法。请注意，此例子引用了命名为 <code>example.gif</code> 的图片文件。如果此文件存在，它将被用作拖动图像，如果此文件不存在，浏览器会使用其默认的拖动图像。</p>
+
+<pre class="brush: js notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang=en&gt;
+&lt;title&gt;Example of DataTransfer.setDragImage()&lt;/title&gt;
+&lt;meta name="viewport" content="width=device-width"&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;script&gt;
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ // 设置拖动的格式和数据。使用事件目标的id作为数据
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+ // 创建一个图像并且使用它作为拖动图像
+ // 请注意： 改变 "example.gif" 为一个已经存在的图片
+ // 或者，一个还没有创建出来的图片，那么浏览器将会使用默认的拖动图片
+ // 译者注：默认的拖动图片与拖动对象没有联系。一般是一个小型文件图标
+ var img = new Image();
+ img.src = 'example.gif';
+ ev.dataTransfer.setDragImage(img, 10, 10);
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ // 获取拖放目标的id数据
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;/script&gt;
+&lt;body&gt;
+&lt;h1&gt;Example of &lt;code&gt;DataTransfer.setDragImage()&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;/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-setdragimage','setDragImage()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-setdragimage','setDragImage()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+  </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>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>{{CompatNo}}</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>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>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">参考链接</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
+
+<div id="gtx-trans" style="position: absolute; left: 543px; top: 687px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/zh-cn/web/api/datatransfer/types/index.html b/files/zh-cn/web/api/datatransfer/types/index.html
new file mode 100644
index 0000000000..6bc63e1811
--- /dev/null
+++ b/files/zh-cn/web/api/datatransfer/types/index.html
@@ -0,0 +1,177 @@
+---
+title: DataTransfer.types
+slug: Web/API/DataTransfer/types
+translation_of: Web/API/DataTransfer/types
+---
+<div>
+<p>{{APIRef("HTML Drag and Drop API")}}</p>
+
+<p><strong><code>DataTransfer.types</code></strong> 是只读属性。它返回一个我们在{{event("dragstart")}}事件中设置的拖动数据格式(如 {{domxref("DOMString","字符串")}}) 的数组。 格式顺序与拖动操作中包含的数据顺序相同。  </p>
+
+<p>这些格式是指定数据类型或格式的Unicode字符串，通常由MIME类型给出。 一些非MIME类型的值是由于历史遗留原因（例如“text”）而特殊设置的。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre><var>dataTransfer</var>.types;
+</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>拖动操作中使用的数据格式数组。每种格式都是{{domxref("DOMString","字符串")}}类型。如果拖动操作不包含数据，则此数组列表将为空。如果拖动操作中包含任何文件，则其中一个类型将是<code>Files。</code></p>
+
+<h2 id="举个例子">举个例子</h2>
+
+<p>这个例子展示<code>types</code>和{{domxref("DataTransfer.items","items")}} 属性的用法</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html lang=en&gt;
+&lt;title&gt;Examples of DataTransfer.{types,items} properties&lt;/title&gt;
+&lt;meta content="width=device-width"&gt;
+&lt;style&gt;
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #target {
+    border: 1px solid black;
+  }
+&lt;/style&gt;
+&lt;script&gt;
+function dragstart_handler(ev) {
+ console.log("dragStart: target.id = " + ev.target.id);
+ // 将这个元素的id添加到drag载荷中，
+ // 以便drop事件知道将哪个元素添加到其树中。
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+ ev.dataTransfer.effectAllowed = "move";
+}
+
+function drop_handler(ev) {
+ console.log("drop: target.id = " + ev.target.id);
+ ev.preventDefault();
+ // 得到目标的id并且将移动的元素添加到目标DOM中
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+ // 打印每种格式类型
+ if (ev.dataTransfer.types != null) {
+   for (var i=0; i &lt; ev.dataTransfer.types.length; i++) {
+     console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
+   }
+ }
+ // 打印每个item的“kind”和“type”属性值
+ if (ev.dataTransfer.items != null) {
+   for (var i=0; i &lt; ev.dataTransfer.items.length; i++) {
+     console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
+   }
+ }
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+ // 设置dropEffect属性值为move
+ ev.dataTransfer.dropEffect = "move"
+}
+&lt;/script&gt;
+&lt;body&gt;
+&lt;h1&gt;Examples of &lt;code&gt;DataTransfer&lt;/code&gt;.{&lt;code&gt;types&lt;/code&gt;, &lt;code&gt;items&lt;/code&gt;} properties&lt;/h1&gt;
+ &lt;ul&gt;
+   &lt;li id="i1" ondragstart="dragstart_handler(event);" draggable="true"&gt;Drag Item 1 to the Drop Zone&lt;/li&gt;
+   &lt;li id="i2" ondragstart="dragstart_handler(event);" draggable="true"&gt;Drag Item 2 to the Drop Zone&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"&gt;Drop Zone&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">规范文档</th>
+   <th scope="col">状态</th>
+   <th scope="col">说明</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-types", "types")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-types", "types")}}</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<br>
+    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></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>{{CompatVersionUnknown}}<br>
+    {{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]从Firefox52版本开始，{{domxref("DataTransfer.types")}}属性根据规范返回一个冻结的(frozen){{domxref("DOMString")}}s数组，而不是{{domxref("DOMStringList")}}</p>
+
+<h2 id="参考链接">参考链接</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
+</div>
+
+<p> </p>