--- title: DataTransfer.setData() slug: Web/API/DataTransfer/setData tags: - API - HTML DOM - Method - Reference - 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")}} に指定したデータと型を設定します。与えられた型のデータが存在しない場合、このデータはドラッグデータストアの末尾に加えられ、このような {{domxref("DataTransfer.types","types")}} リストの最後のアイテムは新しい型になります。与えられた型のデータが存在する場合、既存のデータが同じ位置で置き換えられます。同じ型のデータが置き換えられる時、{{domxref("DataTransfer.types","types")}} リストの並び順は変更されません。</p> <p>データ型は、例えば <code>text/plain</code> や <code>text/uri-list</code> です。</p> <h2 id="Syntax" name="Syntax">構文</h2> <pre class="syntaxbox">void <var>dataTransfer</var>.setData(format, data); </pre> <h3 id="引数">引数</h3> <dl> <dt><em>format</em></dt> <dd>{{domxref("DataTransfer","drag object")}} に追加するドラッグデータの型を表す {{domxref("DOMString")}}。</dd> <dt><em>data</em></dt> <dd>{{domxref("DataTransfer","drag object")}} に追加するデータを表す {{domxref("DOMString")}}。</dd> </dl> <h3 id="Return_value" name="Return_value">戻り値</h3> <dl> <dt>無効。</dt> </dl> <h2 id="Example" name="Example">例</h2> <p>この例は、{{domxref("DataTransfer")}} オブジェクトの {{domxref("DataTransfer.getData","getData()")}} メソッドおよび {{domxref("DataTransfer.setData","setData()")}} メソッド、{{domxref("DataTransfer.clearData","clearData()")}} メソッドの使い方を紹介します。</p> <pre class="brush: js"><!DOCTYPE html> <html lang=en> <title>Examples of DataTransfer's setData(), getData(), and clearData()</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> 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"); 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"); ev.target.appendChild(document.getElementById(data)); // Clear the drag data cache (for all formats/types) ev.dataTransfer.clearData(); } </script> <body> <h1>Examples of <code>DataTransfer</code>: <code>setData()</code>, <code>getData()</code>, <code>clearData()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div> </body> </html> </pre> <h2 id="Specifications" name="Specifications">仕様</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-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>初期定義</td> </tr> </tbody> </table> <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> <p>{{Compat("api.DataTransfer.setData")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> <p>{{page("/docs/Web/API/DataTransfer", "See_also")}}</p>