DataTransfer: setData() メソッド
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.setData() メソッドは、ドラッグ操作のドラッグデータに指定したデータと型を設定します。与えられた型のデータが存在しない場合、このデータはドラッグデータストアの末尾に加えられ、このような types リストの最後の項目は新しい型になります。与えられた型のデータが存在する場合、既存のデータが同じ位置で置き換えられます。同じ型のデータが置き換えられる時、types リストの並び順は変更されません。
データ型は、例えば text/plain や text/uri-list です。
構文
js
setData(format, data)
引数
format-
文字列で、
DataTransferに追加するドラッグデータの型を表します。 data-
文字列で、
DataTransferに追加するデータを表します。
返値
なし (undefined)。
例
要素のドラッグ
この例では、<p> 要素をターゲットの <div> 要素の中にドラッグすることができます。
-
dragstartハンドラー中で、setData()を使用して<p>要素のidをDataTransferオブジェクトに追加します。 -
dropハンドラーでは、idを取得し、それを使用して<p>要素をターゲットに移動します。
HTML
html
<div>
<p id="source" draggable="true">
この要素を選択し、ドロップゾーンまでドラッグしてから選択を解除すると、要素が移動します。
</p>
</div>
<div id="target">ドロップゾーン</div>
<button id="reset">例をリセット</button>
CSS
css
div {
margin: 0.5em 0;
padding: 2em;
}
#target,
#source {
border: 1px solid black;
padding: 0.5rem;
}
.dragging {
background-color: pink;
}
JavaScript
js
const source = document.querySelector("#source");
source.addEventListener("dragstart", (ev) => {
console.log("dragStart");
// ソース要素の背景色を変更して、ドラッグが開始されたことを示す
ev.currentTarget.classList.add("dragging");
// ドラッグデータキャッシュ（すべての形式/型）をクリア
ev.dataTransfer.clearData();
// ドラッグの形式とデータを設定。
// データにイベントターゲットの ID を使用
ev.dataTransfer.setData("text/plain", ev.target.id);
});
source.addEventListener("dragend", (ev) =>
ev.target.classList.remove("dragging"),
);
const target = document.querySelector("#target");
target.addEventListener("dragover", (ev) => {
console.log("dragOver");
ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
console.log("Drop");
ev.preventDefault();
// データ（ソース要素の ID）を取得
const data = ev.dataTransfer.getData("text");
const source = document.getElementById(data);
ev.target.appendChild(source);
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
結果
仕様書
| Specification |
|---|
| HTML # dom-datatransfer-setdata-dev |