Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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

関連情報

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

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