DataTransfer：clearData() 方法
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
DataTransfer.clearData() 方法删除给定类型拖拽操作的拖拽数据。如果给定类型的数据不存在，则此方法将不执行任何操作。
如果调用此方法时没有传入参数，或者参数为空字符串，则将删除所有类型的数据。
此方法不会从拖拽操作中删除文件，因此如果在拖拽文件，则可能会在 DataTransfer.types 列表中存在类型为 "Files" 的条目。
备注：因为拖拽操作的数据存储只在 dragstart 的处理器中可写，你只能在此事件的处理器中调用此方法。
语法
js
clearData()
clearData(format)
参数
format可选-
指定要删除的数据类型的字符串。如果此参数为空字符串或未提供，则将删除所有类型的数据。
返回值
无（undefined）。
示例
这个例子显示了使用 DataTransfer 对象的 getData()、setData() 以及 clearData() 方法。
HTML
html
<span class="tweaked" id="source" draggable="true">
选择该元素，拖拽它到放置区域，然后释放选择以移动该元素。
</span>
<span class="tweaked" id="target">放置区域</span>
<div>状态：<span id="status">开始拖拽</span></div>
<div>数据：<span id="data">未初始化</span></div>
CSS
css
span.tweaked {
display: inline-block;
margin: 1em 0;
padding: 1em 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
js
// 选择 HTML 元素
const draggable = document.getElementById("source");
const droppable = document.getElementById("target");
const status = document.getElementById("status");
const data = document.getElementById("data");
let dropped = false;
// 注册事件处理器
draggable.addEventListener("dragstart", dragStartHandler);
draggable.addEventListener("dragend", dragEndHandler);
droppable.addEventListener("dragover", dragOverHandler);
droppable.addEventListener("dragleave", dragLeaveHandler);
droppable.addEventListener("drop", dropHandler);
function dragStartHandler(event) {
status.textContent = "拖拽中";
// 修改目标元素的边框以表示已开始拖拽
event.currentTarget.style.border = "1px dashed blue";
// 首先清除现有的剪贴板内容；这将影响所有类型，因为我们没有指定特定类型。
event.dataTransfer.clearData();
// 设置拖拽的格式和数据（使用事件目标的 id 作为数据）
event.dataTransfer.setData("text/plain", event.target.id);
data.textContent = event.dataTransfer.getData("text/plain");
}
function dragEndHandler(event) {
if (!dropped) {
status.textContent = "取消拖拽";
}
data.textContent = event.dataTransfer.getData("text/plain") || "空";
// 修改边框以表示不再继续拖拽
event.currentTarget.style.border = "1px solid black";
if (dropped) {
// 移除所有事件监听器
draggable.removeEventListener("dragstart", dragStartHandler);
draggable.removeEventListener("dragend", dragEndHandler);
dropable.removeEventListener("dragover", dragOverHandler);
dropable.removeEventListener("dragleave", dragLeaveHandler);
dropable.removeEventListener("drop", dropHandler);
}
}
function dragOverHandler(event) {
status.textContent = "可放下";
event.preventDefault();
}
function dragLeaveHandler(event) {
status.textContent = "拖拽中（可释放）";
event.preventDefault();
}
function dropHandler(event) {
dropped = true;
status.textContent = "已放下";
event.preventDefault();
// 获取与事件格式 « text » 关联的数据
const _data = event.dataTransfer.getData("text/plain");
const element = document.getElementById(_data);
// 将拖拽源元素附加到事件的目标元素
event.target.appendChild(element);
// 更改 CSS 样式和显示的文本
element.style.cssText = "border: 1px solid black;display: block; color: red";
element.textContent = "我在可放下的区域内！";
}
规范
| Specification |
|---|
| HTML # dom-datatransfer-cleardata-dev |