DataTransfer.types
返回值
BCD tables only load in the browser
DataTransfer.types
是只读属性。它返回一个我们在dragstart (en-US)
事件中设置的拖动数据格式(如 字符串
) 的数组。 格式顺序与拖动操作中包含的数据顺序相同。
这些格式是指定数据类型或格式的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 |