DataTransfer.clearData()

DataTransfer.clearData() メソッドは、指定されたタイプのドラッグ操作の ドラッグデータ を削除します。指定された型のデータが存在しない場合、このメソッドは何もしません。

このメソッドが引数なしで呼び出された場合、またはフォーマットが空の string であった場合、すべての型のデータが削除されます。

このメソッドはドラッグ操作からファイルを削除しないので、ドラッグに含まれるファイルがある場合、オブジェクトの DataTransfer.types リストに "Files" タイプのエントリが残る可能性があります。

このメソッドは、dragstart イベントのハンドラでのみ使用できます。なぜなら、ドラッグ操作のデータストアが書き込み可能なのはその時だけだからです。

シンタックス

DataTransfer.clearData([format]);

パラメータ

format 省略可
削除するデータの型を指定する 文字列。このパラメータが空の文字列であったり、指定されていない場合は、すべての型のデータが削除されます。

Example

この例では、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要素を選択する
  var draggable = document.getElementById('source');
  var dropable = document.getElementById('target');
  var status = document.getElementById('status');
  var data = document.getElementById('data');
  var dropped = false;

  // イベントハンドラを登録する
  draggable.addEventListener('dragstart', dragStartHandler);
  draggable.addEventListener('dragend', dragEndHandler);
  dropable.addEventListener('dragover', dragOverHandler);
  dropable.addEventListener('dragleave', dragLeaveHandler);
  dropable.addEventListener('drop', dropHandler);

  function dragStartHandler (event) {
    status.innerHTML = 'ドラッグ中';

    // ドラッグが開始されたことを示すように、ターゲット要素の境界線を変更する
    event.currentTarget.style.border = '1px dashed blue';

    // 既存のクリップボードをクリアすることから始めます。
    // 特定のタイプを指定していないので、これはすべてのタイプに影響します。

    event.dataTransfer.clearData();

    // ドラッグのフォーマットとデータを設定します(データはイベントターゲットのIDを使用)
    event.dataTransfer.setData('text/plain', event.target.id);

    data.innerHTML = event.dataTransfer.getData('text/plain');
  }

  function dragEndHandler (event) {
    if (!dropped) {
      status.innerHTML = 'ドラッグのキャンセル';
    }

    data.innerHTML = event.dataTransfer.getData('text/plain') || 'empty';

    // ドラッグ中ではないことを示すために境界線を変更する
    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.innerHTML = 'ドロップ可能';

    event.preventDefault();
  }

  function dragLeaveHandler (event) {
    status.innerHTML = 'ドラッグ中 (ドロップは可能)';

    event.preventDefault();
  }

  function dropHandler (event) {
    dropped = true;

    status.innerHTML = 'ドロップしました。';

    event.preventDefault();

    // イベント形式に連動したデータを取得する « text »
    var _data = event.dataTransfer.getData('text/plain');
    var element = document.getElementById(_data);

    // イベントのターゲット要素にドラッグソース要素を追加する
    event.target.appendChild(element);

    // CSSスタイルと表示テキストを変更する
    element.style.cssText = 'border: 1px solid black;display: block; color: red';
    element.innerHTML = "ドロップゾーンに入りました!";
  }
})

仕様

仕様書 ステータス コメント
HTML Living Standard
DataTransfer.clearData() の定義
現行の標準
HTML 5.1
DataTransfer.clearData() の定義
勧告 初期定義

ブラウザの互換性

BCD tables only load in the browser

あわせて参照

{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}