DataTransfer.getData()
DataTransfer.getData()
メソッドは、指定した型のドラッグデータを (DOMString
として) 受け取ります。ドラッグ操作がデータを含まない場合、このメソッドは空文字列を返します。
データ型は、例えば text/plain
や text/uri-list
です。
構文
DOMString dataTransfer.getData(format);
引数
- format
- 受け取るデータの型を表す
DOMString
。
戻り値
例
この例は、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() の定義 |
勧告 | 初期定義 |
ブラウザ実装状況
BCD tables only load in the browser