initial commit

1 files changed, 189 insertions, 0 deletions

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>