值
一个数据格式数组。每种格式都是一个字符串，通常是 MIME 类型，例如 text/plain 或 text/html。如果拖放操作不包含任何数据，此列表将为空。如果拖放操作中包含任何文件，则其中一个类型将是字符串 Files。
示例
此示例展示了 types 和 items 属性的使用。
html
<ul>
<li id="i1" draggable="true">Drag Item 1 to the Drop Zone</li>
<li id="i2" draggable="true">Drag Item 2 to the Drop Zone</li>
</ul>
<div id="target">Drop Zone</div>
<pre id="output"></pre>
css
div {
margin: 0em;
padding: 2em;
}
#target {
border: 1px solid black;
}
js
const output = document.getElementById("output");
function log(msg) {
output.textContent += `${msg}\n`;
}
document.querySelectorAll("li").forEach((item) => {
item.addEventListener("dragstart", dragstart_handler);
});
function dragstart_handler(ev) {
log(`dragStart: target.id = ${ev.target.id}`);
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
const target = document.getElementById("target");
target.addEventListener("drop", (ev) => {
log(`drop: target.id = ${ev.target.id}`);
ev.preventDefault();
// Get the id of the target and add the moved element to the target's DOM
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
// Print each format type
for (let i = 0; i < ev.dataTransfer.types.length; i++) {
log(`… types[${i}] = ${ev.dataTransfer.types[i]}`);
}
// Print each item's "kind" and "type"
for (let i = 0; i < ev.dataTransfer.items.length; i++) {
log(
`… items[${i}].kind = ${ev.dataTransfer.items[i].kind}; type = ${ev.dataTransfer.items[i].type}`,
);
}
});
target.addEventListener("dragover", (ev) => {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
});
规范
| 规范 |
|---|
| HTML # dom-datatransfer-types-dev |
浏览器兼容性
加载中…