DataTransfer.clearData()
DataTransfer.clearData()
メソッドは、ドラッグ操作の ドラッグデータ
の中で指定された型のものを削除します。指定された型のデータが存在しない場合、このメソッドは何もしません。
このメソッドが引数なしで呼び出された場合、またはフォーマットが空文字列であった場合、すべての型のデータが削除されます。
このメソッドはドラッグ操作からファイルを削除しないので、ドラッグに含まれるファイルがある場合、 "Files"
型の項目がオブジェクトの DataTransfer.types
の一覧に残る可能性があります。
メモ: このメソッドは、 dragstart
イベントのハンドラーでのみ使用できます。ドラッグ操作のデータストアが書き込み可能なのはその時だけだからです。
構文
clearData()
clearData(format)
引数
format
省略可-
削除するデータの型を指定する文字列。この引数が空の文字列であったり、指定されていない場合は、すべての型のデータが削除されます。
返値
なし (undefined
)。
例
この例では、 DataTransfer
オブジェクトの getData()
、setData()
、clearData()
メソッドを使用しています。
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
span.tweaked {
display: inline-block;
margin: 1em 0;
padding: 1em 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
window.addEventListener('DOMContentLoaded', function () {
// 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') || 'empty';
// ドラッグ中ではないことを示すために境界線を変更する
event.currentTarget.style.border = '1px solid black';
if (dropped) {
// すべてのイベントリスナーを削除
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 = 'ドロップ可能';
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 Standard # dom-datatransfer-cleardata-dev |
ブラウザーの互換性
BCD tables only load in the browser