DataTransferItem：type 属性

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.

只读属性 DataTransferItem.type 返回代表拖动数据项的 DataTransferItem 对象的类型（格式）。type 是一个 Unicode 字符串，通常由 MIME 类型给出（虽然 MIME 类型不是必须的）。

一些示例类型：text/plain 和 text/html。

值

一个表示拖动数据项类型的字符串。

示例

该示例演示了 type 属性的用法。

js
function dropHandler(ev) {
  console.log("放置");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // 该项目是目标节点
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // 拖动数据项是 HTML
      console.log("放置：HTML");
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // 拖动数据项是 URI
      console.log("放置：URI");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // 拖动数据项是图像文件
      const f = data[i].getAsFile();
      console.log("……放置：文件");
    }
  }
}

规范

Specification
HTML Standard
# dom-datatransferitem-type-dev

浏览器兼容性

BCD tables only load in the browser

参见