DataTransfer.getData()

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';
}

実行結果

仕様

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

ブラウザ実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから！

機能 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 タイプがホワイトリストに存在しない場合、このメソッドは常に空リストを返します。

関連情報