HTML5 event.dataTransfer.types属性详解

14 min read

HTML5的event.dataTransfer.types属性是一个只读属性，返回一个数组，包含了拖放操作中可用的数据类型。

在拖动元素的过程中，可以使用event.dataTransfer.setData(type, data)方法来设置传递的数据类型和值。然后，在放置元素时，可以使用event.dataTransfer.getData(type)方法来获取传递的数据值。

例如，可以使用以下代码在拖动元素时设置传递的数据类型和值：

event.dataTransfer.setData("text/plain", "Hello, World!");
event.dataTransfer.setData("text/html", "<b>Hello, World!</b>");

在放置元素时，可以通过event.dataTransfer.types属性来获取可用的数据类型列表，并使用event.dataTransfer.getData(type)方法来获取特定类型的数据值：

var types = event.dataTransfer.types; // 返回一个数组，包含了可用的数据类型
var textData = event.dataTransfer.getData("text/plain"); // 获取"text/plain"类型的数据值
var htmlData = event.dataTransfer.getData("text/html"); // 获取"text/html"类型的数据值

当数据类型不存在时，event.dataTransfer.getData(type)方法会返回空字符串。

总结一下，event.dataTransfer.types属性是一个存储了拖放操作可用的数据类型的数组，可以通过此属性获取数据类型列表，并使用event.dataTransfer.getData(type)方法获取特定类型的数据值。