DataTransfer：items 属性
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());
结果
规范
| 规范 |
|---|
| HTML # dom-datatransfer-items-dev |