DataTransferItemList

DataTransferItemList 对象是一个 DataTransferItem 对象列表，表示正在拖动的项目。在拖动操作期间，每个 DragEvent 都有一个 dataTransfer 属性，该属性是一个 DataTransferItemList。

可以使用方括号表示法 [] 访问各个项目。

DataTransferItemList 主要设计用于 HTML 拖放 API，并且仍在 HTML 拖放部分中指定，但现在它也用于其他 API，例如 ClipboardEvent.clipboardData 和 InputEvent.dataTransfer。DataTransferItemList 的文档将主要讨论其在拖放操作中的用法，您应该参考其他 API 的文档以了解在这些上下文中使用 DataTransferItemList 的方法。

此接口没有构造函数。

实例属性

DataTransferItemList.length 只读: 一个无符号长整型，表示列表中拖动项目的数量。

实例方法

DataTransferItemList.add(): 将一个项目（File 对象或字符串）添加到拖动项目列表中，并为新项目返回一个 DataTransferItem 对象。
DataTransferItemList.remove(): 从给定索引处的列表中删除拖动项目。
DataTransferItemList.clear(): 从列表中删除所有拖动项目。

示例

此示例演示如何使用拖放。

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;
}

结果

规范

规范
HTML 标准 # the-datatransferitemlist-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。