MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

DataTransfer.setData()

DataTransfer.setData() メソッドは、ドラッグ操作の drag data に指定したデータと型を設定します。与えられた型のデータが存在しない場合、このデータはドラッグデータストアの末尾に加えられ、このような types リストの最後のアイテムは新しい型になります。与えられた型のデータが存在する場合、既存のデータが同じ位置で置き換えられます。同じ型のデータが置き換えられる時、types リストの並び順は変更されません。

データ型は、例えば text/plaintext/uri-list です。

構文

void dataTransfer.setData(format, data);

引数

format
drag object に追加するドラッグデータの型を表す DOMString
data
drag object に追加するデータを表す DOMString

戻り値

無効。

この例は、DataTransfer オブジェクトの getData() メソッドおよび setData() メソッド、clearData() メソッドの使い方を紹介します。

<!DOCTYPE html>
<html lang=en>
<title>Examples of DataTransfer.{setData(),getData(),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>

仕様

仕様書 策定状況 備考
WHATWG HTML Living Standard
setData() の定義
現行の標準  
HTML 5.1
setData() の定義
勧告 初期定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 4 3.5 10 12 3.1
機能 Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 未サポート 未サポート 未サポート 未サポート 10 未サポート 未サポート

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: hamasaki, Marsf
 最終更新者: hamasaki,