このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
DataTransferItemList
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2016年11月以降、すべてのブラウザーで利用可能です。
DataTransferItemList オブジェクトは DataTransferItem オブジェクトのリストで、ドラッグされているアイテムを表します。ドラッグ操作の間、それぞれの DragEvent は dataTransfer プロパティを持ち、そのプロパティが DataTransferItemList となります。
それぞれのアイテムは、ブラケット記法 [] を使用してアクセスできます。
DataTransferItemList は主に HTML ドラッグ&ドロップ API のために設計され、現在も HTML ドラッグアンドドロップセクションで規定されています。しかし現在では、ClipboardEvent.clipboardData や InputEvent.dataTransfer などの他の API でも使用されるようになりました。DataTransferItemList のドキュメントでは主にドラッグ&ドロップ操作における使用法について説明します。他のコンテキストでの DataTransferItemList の使用法については、各 API のドキュメントを参照してください。
このインターフェイスにはコンストラクターがありません。
インスタンスプロパティ
DataTransferItemList.length読取専用-
unsigned longで、リスト内のドラッグアイテムの数を表します。
インスタンスメソッド
DataTransferItemList.add()-
ドラッグアイテムのリストにアイテム(
Fileオブジェクトまたは文字列)を追加し、新しいアイテムのDataTransferItemオブジェクトを返します。 DataTransferItemList.remove()-
指定された位置のリストからドラッグアイテムを削除します。
DataTransferItemList.clear()-
リストからすべてのドラッグ項目を削除します。
例
この例は、ドラッグ & ドロップの使い方を表します。
HTML
<div>
<p id="source" draggable="true">
この要素を選択し、ドロップゾーンまでドラッグして、選択を解除すると要素が移動します。
</p>
</div>
<div id="target">ドロップゾーン</div>
CSS
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
const source = document.getElementById("source");
const target = document.getElementById("target");
source.addEventListener("dragstart", (ev) => {
console.log("dragStart");
// この要素の ID をドラッグペイロードに追加し、ドロップハンドラーが
// どの要素をツリーに追加すべきかを認識できるようにする
const dataList = ev.dataTransfer.items;
dataList.add(ev.target.id, "text/plain");
// ドラッグデータ本体に他のアイテムを追加する
dataList.add("<p>段落...</p>", "text/html");
dataList.add("http://www.example.org", "text/uri-list");
});
source.addEventListener("dragend", (ev) => {
console.log("dragEnd");
const dataList = ev.dataTransfer.items;
// 残っているドラッグデータをすべてクリア
dataList.clear();
});
target.addEventListener("drop", (ev) => {
console.log("Drop");
ev.preventDefault();
// ドロップされたアイテムをループ処理し、そのデータをログに記録
for (const item of ev.dataTransfer.items) {
if (item.kind === "string" && item.type.match(/^text\/plain/)) {
// アイテムがターゲットノード
item.getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (item.kind === "string" && item.type.match(/^text\/html/)) {
// ドラッグデータ項目が HTML
item.getAsString((s) => {
console.log(`... Drop: HTML = ${s}`);
});
} else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
// ドラッグデータ項目が URI
item.getAsString((s) => {
console.log(`... Drop: URI = ${s}`);
});
}
}
});
target.addEventListener("dragover", (ev) => {
console.log("dragOver");
ev.preventDefault();
// dropEffect を「移動」に設定
ev.dataTransfer.dropEffect = "move";
});
結果
仕様書
| 仕様書 |
|---|
| HTML # the-datatransferitemlist-interface |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。