DataTransfer：items 属性
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年4月.
DataTransfer 接口的 items 只读属性返回表示拖拽操作中的数据传输项的列表 对象的 DataTransferItemList 对象，每个被拖拽的对象对应一个列表项。如果拖拽操作中没有数据，则列表为空。
示例
记录被拖拽的项目
本示例使用 items 来记录被拖拽项目的信息。
HTML
html
<ul>
<li id="source1" draggable="true">将项目一拖拽到可放置区域</li>
<li id="source2" draggable="true">将项目二拖拽到可放置区域</li>
</ul>
<div id="target">可放置区域</div>
<button id="reset">重置</button>
CSS
css
div {
margin: 0em;
padding: 2em;
}
#target {
border: 1px solid black;
}
JavaScript
js
function dragstartHandler(ev) {
console.log(`dragstart: target.id = ${ev.target.id}`);
// 将此元素的 id 添加到拖拽负载中，以便放置处理器知道将哪个元素添加到树中
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function dropHandler(ev) {
ev.preventDefault();
// 获取目标的 id 并将移动的元素添加到目标的 DOM 中
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
// 打印每个项目的“kind”和“type”
if (ev.dataTransfer.items) {
for (const item of ev.dataTransfer.items) {
console.log(`kind = ${item.kind}, type = ${item.type}`);
}
}
}
function dragoverHandler(ev) {
ev.preventDefault();
// 设置 dropEffect 为 move
ev.dataTransfer.dropEffect = "move";
}
const source1 = document.querySelector("#source1");
const source2 = document.querySelector("#source2");
const target = document.querySelector("#target");
source1.addEventListener("dragstart", dragstartHandler);
source2.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
结果
规范
| Specification |
|---|
| HTML # dom-datatransfer-items-dev |