DataTransfer: getData() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
DataTransfer.getData() メソッドは、指定した型のドラッグデータを（文字列として）受け取ります。ドラッグ操作がデータを含んでいない場合、このメソッドは空文字列を返します。
データ型は、例えば text/plain や text/uri-list です。
構文
js
getData(format)
引数
format-
文字列で、受け取るデータの型を表します。
返値
文字列で、 format で指定した型のドラッグデータを表します。ドラッグ操作にデータがなかったり、 format で指定した型のデータがなかったりした場合、このメソッドは空文字列を返します。
DataTransfer.getData() は、特定のイベントに対してのみデータの読み書きを許可するため、期待した値を返さない場合があることに注意してください。dragstart と drop イベントの処理中は、安全にデータにアクセスすることができます。それ以外のイベントでは、データは利用できないものと考えてください。それでも、項目とその形式を列挙することは可能です。
例
この例は、DataTransfer オブジェクトの getData() メソッドおよび setData() メソッドの使い方を紹介します。
HTML
html
<div id="div1">
<span id="drag" draggable="true">他のボックスにドラッグ</span>
</div>
<div id="div2"></div>
CSS
css
#div1,
#div2 {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
}
JavaScript
js
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const dragElement = document.getElementById("drag");
dragElement.addEventListener("dragstart", drag);
div1.addEventListener("dragover", allowDrop);
div2.addEventListener("dragover", allowDrop);
div1.addEventListener("drop", drop);
div2.addEventListener("drop", drop);
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();
const data = dropEvent.dataTransfer.getData("text");
dropEvent.target.appendChild(document.getElementById(data));
dragElement.style.color = "black";
}
結果
仕様書
| Specification |
|---|
| HTML # dom-datatransfer-getdata-dev |