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