---
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>