DataTransfer.items

読み取り専用の DataTransfer プロパティの items プロパティは、ドラッグ操作での listDataTransfer items です。リストには操作中の項目ごとに1つの項目が含まれており、操作中に項目がなかった場合はリストは空になります。

シンタックス

itemList = dataTransfer.items;

戻り値

ドラッグ操作でドラッグされる項目を表す DataTransferItem オブジェクトを含む DataTransferItemList オブジェクトで、ドラッグされるオブジェクトごとに1つのリスト項目があります。ドラッグ操作にデータがない場合、リストは空です。

この例では、itemstypes プロパティを使用しています。

<!DOCTYPE html>
<html lang=ja>
<title>DataTransfer.{types,item}プロパティの例</title>
<meta content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #target {
    border: 1px solid black;
  }
</style>
<script>
function dragstart_handler(ev) {
 console.log("dragStart: target.id = " + ev.target.id);
 // この要素の id をドラッグ ペイロードに追加し、
 // drop ハンドラがどの要素をツリーに追加するかを知ることができるようにします。
 ev.dataTransfer.setData("text/plain", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";
}

function drop_handler(ev) {
 console.log("drop: target.id = " + ev.target.id);
 ev.preventDefault();
 // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
 // 各フォーマットタイプをプリントする
 if (ev.dataTransfer.types != null) {
   for (var i=0; i < ev.dataTransfer.types.length; i++) {
     console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
   }
 }
 // 各項目の "kind" と "type" をプリントする
 if (ev.dataTransfer.items != null) {
   for (var i=0; i < ev.dataTransfer.items.length; i++) {
     console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
   }
 }
}

function dragover_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
 // dropEffect を移動するように設定します。
 ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1><code>DataTransfer</code>.{<code>types</code>, <code>items</code>} プロパティの例</h1>
 <ul>
   <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">アイテム1をドロップゾーンにドラッグ</li>
   <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">アイテム2をドロップゾーンにドラッグ</li>
 </ul>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
</body>
</html>

仕様

仕様書 ステータス コメント
HTML Living Standard
items の定義
現行の標準
HTML 5.1
items の定義
勧告 初期定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
itemsChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 50IE 未対応 なしOpera 完全対応 12Safari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応

あわせて参照