DataTransferItemList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

DataTransferItemList オブジェクトは DataTransferItem オブジェクトのリストで、ドラッグされているアイテムを表します。 ドラッグ操作 の間、それぞれの DragEvent は dataTransfer プロパティを持ち、そのプロパティが DataTransferItemList となります。

それぞれのアイテムは、配列演算子 [] を使用してアクセスできます。

このインターフェイスにはコンストラクターがありません。

インスタンスプロパティ

DataTransferItemList.length 読取専用: unsigned long で、リスト内のドラッグアイテムの数を表します。

インスタンスメソッド

DataTransferItemList.add(): ドラッグアイテムのリストにアイテム（File オブジェクトまたは文字列）を追加し、新しいアイテムの DataTransferItem オブジェクトを返します。
DataTransferItemList.remove(): 指定された位置のリストからドラッグアイテムを削除します。
DataTransferItemList.clear(): リストからすべてのドラッグ項目を削除します。
DataTransferItemList.DataTransferItem(): 指定された位置の DataTransferItem を返すゲッターです。

例

この例は、ドラッグ & ドロップの使い方を表します。

JavaScript

function dragstartHandler(ev) {
  console.log("dragStart");

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");

  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();

  // Loop through the dropped items and log their data
  for (const item of ev.dataTransfer.items) {
    if (item.kind === "string" && item.type.match(/^text\/plain/)) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match(/^text\/html/)) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragoverHandler(ev) {
  console.log("dragOver");
  ev.preventDefault();

  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragendHandler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;

  // Clear any remaining drag data
  dataList.clear();
}

HTML

html

<div>
  <p
    id="source"
    ondragstart="dragstartHandler(event);"
    ondragend="dragendHandler(event);"
    draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
  id="target"
  ondrop="dropHandler(event);"
  ondragover="dragoverHandler(event);">
  Drop Zone
</div>

CSS

css

div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}

結果

仕様書

Specification
HTML Standard # the-datatransferitemlist-interface

ブラウザーの互換性

BCD tables only load in the browser