DataTransfer.clearData()

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

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

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

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

シンタックス

DataTransfer.clearData([format]);

パラメータ

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

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() の定義
勧告 初期定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
clearDataChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

あわせて参照