DataTransfer.types

DataTransfer.types 是只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式(如 字符串) 的数组。 格式顺序与拖动操作中包含的数据顺序相同。  

这些格式是指定数据类型或格式的Unicode字符串，通常由MIME类型给出。 一些非MIME类型的值是由于历史遗留原因（例如“text”）而特殊设置的。

语法

dataTransfer.types;

返回值

拖动操作中使用的数据格式数组。每种格式都是字符串类型。如果拖动操作不包含数据，则此数组列表将为空。如果拖动操作中包含任何文件，则其中一个类型将是Files。

举个例子

这个例子展示types和items 属性的用法

<!DOCTYPE html>
<html lang=en>
<title>Examples of DataTransfer.{types,items} properties</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添加到drag载荷中，
 // 以便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]);
   }
 }
 // 打印每个item的“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属性值为move
 ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1>Examples of <code>DataTransfer</code>.{<code>types</code>, <code>items</code>} properties</h1>
 <ul>
   <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">Drag Item 1 to the Drop Zone</li>
   <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">Drag Item 2 to the Drop Zone</li>
 </ul>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
</html>

规范

规范文档 状态 说明
HTML Living Standard
types		 Living Standard  
HTML 5.1
types		 Recommendation Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 (Yes) 3.5
52 (52)[1]		 10 12 3.1
  
Feature Android Android Webview Chrome for Android Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 未实现 未实现 (Yes) (Yes)
52.0 (52)[1]		 未实现 10 未实现 未实现

[1]从Firefox52版本开始，DataTransfer.types属性根据规范返回一个冻结的(frozen)DOMStrings数组，而不是DOMStringList

参考链接

 

相关主题