DataTransfer: clearData() 方法
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">
Select this element, drag it to the Drop Zone and then release the selection
to move the element.
</span>
<span class="tweaked" id="target">Drop Zone</span>
<div>Status: <span id="status">Drag to start</span></div>
<div>Data is: <span id="data">uninitialized</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
// Select HTML elements
const draggable = document.getElementById("source");
const droppable = document.getElementById("target");
const status = document.getElementById("status");
const data = document.getElementById("data");
let dropped = false;
// Register event handlers
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 = "Drag in process";
// Change target element's border to signify drag has started
event.currentTarget.style.border = "1px dashed blue";
// Start by clearing existing clipboards; this will affect all types since we
// don't give a specific type.
event.dataTransfer.clearData();
// Set the drag's format and data (use event target's id for data)
event.dataTransfer.setData("text/plain", event.target.id);
data.textContent = event.dataTransfer.getData("text/plain");
}
function dragEndHandler(event) {
if (!dropped) {
status.textContent = "Drag canceled";
}
data.textContent = event.dataTransfer.getData("text/plain") || "empty";
// Change border to signify drag is no longer in process
event.currentTarget.style.border = "1px solid black";
if (dropped) {
// Remove all event listeners
draggable.removeEventListener("dragstart", dragStartHandler);
draggable.removeEventListener("dragend", dragEndHandler);
droppable.removeEventListener("dragover", dragOverHandler);
droppable.removeEventListener("dragleave", dragLeaveHandler);
droppable.removeEventListener("drop", dropHandler);
}
}
function dragOverHandler(event) {
status.textContent = "Drop available";
event.preventDefault();
}
function dragLeaveHandler(event) {
status.textContent = "Drag in process (drop was available)";
event.preventDefault();
}
function dropHandler(event) {
dropped = true;
status.textContent = "Drop done";
event.preventDefault();
// Get data linked to event format « text »
const _data = event.dataTransfer.getData("text/plain");
const element = document.getElementById(_data);
// Append drag source element to event's target element
event.target.appendChild(element);
// Change CSS styles and displayed text
element.style.cssText = "border: 1px solid black;display: block; color: red";
element.textContent = "I'm in the Drop Zone!";
}
規範
| 規範 |
|---|
| HTML # dom-datatransfer-cleardata-dev |
瀏覽器相容性
載入中…