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

DataTransfer.getData()

DataTransfer.getData() メソッドは、指定した型のドラッグデータを (DOMString として) 受け取ります。ドラッグ操作がデータを含まない場合、このメソッドは空文字列を返します。

データ型は、例えば text/plaintext/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() の定義
現行の標準  
HTML 5.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 タイプがホワイトリストに存在しない場合、このメソッドは常に空リストを返します。

関連情報

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

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