DataTransfer.getData()
メソッドは、指定した型のドラッグデータを (DOMString
として) 受け取ります。ドラッグ操作がデータを含まない場合、このメソッドは空文字列を返します。
データ型は、例えば text/plain
や text/uri-list
です。
構文
DOMString dataTransfer.getData(format);
引数
- format
- 受け取るデータの型を表す
DOMString
。
戻り値
DOMString
- 指定した
format
のドラッグデータを表すDOMString
。ドラッグ操作がデータを持たないか、指定したformat
のデータを持たない場合、このメソッドは空文字列を返します。
例
この例は、DataTransfer
オブジェクトの getData()
メソッドおよび setData()
メソッドの使い方を紹介します。
HTML コンテンツ
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
CSS コンテンツ
#div1, #div2 { width:100px; height:50px; padding:10px; border:1px solid #aaaaaa; }
JavaScript コンテンツ
function allowDrop(allowdropevent) { allowdropevent.target.style.color = 'blue'; allowdropevent.preventDefault(); } function drag(dragevent) { dragevent.dataTransfer.setData("text", dragevent.target.id); dragevent.target.style.color = 'green'; } function drop(dropevent) { dropevent.preventDefault(); var data = dropevent.dataTransfer.getData("text"); dropevent.target.appendChild(document.getElementById(data)); document.getElementById("drag").style.color = 'black'; }
実行結果
仕様
仕様書 | 策定状況 | 備考 |
---|---|---|
WHATWG HTML Living Standard getData() の定義 |
現行の標準 | |
HTML5.1 getData() の定義 |
草案 | 初期定義 |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 4 | 3.5 [1] | 10 (10) | 12 | 3.1 |
機能 | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
基本サポート | 未サポート | 未サポート | 未サポート | 10.0 (10)[1] | 未サポート | 10 | 未サポート | 未サポート |
[1] Firefox 48 より前のバージョンで MIME タイプがホワイトリストに存在しない場合、このメソッドは常に空リストを返します。