DataTransfer.clearData()

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

The DataTransfer.clearData() method removes the drag operation's drag data for the given type. If data for the given type does not exist, this method does nothing.

If this method is called with no arguments or the format is an empty string, the data of all types will be removed.

This method does not remove files from the drag operation, so it's possible for there still to be an entry with the type "Files" left in the object's DataTransfer.types list if there are any files included in the drag.

This method can only be used in the handler for the dragstart event, because that's the only time the drag operation's data store is writeable.

Syntax

DataTransfer.clearData([format]);

Parameters

format Optional
A string which specifies the type of data to remove. If this parameter is an empty string or is not provided, the data for all types is removed.

Example

This example shows the use of the DataTransfer object's getData(), setData() and clearData() methods.

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

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 () {
  // Select HTML elements
  var draggable = document.getElementById('source');
  var dropable = document.getElementById('target');
  var status = document.getElementById('status');
  var data = document.getElementById('data');
  var dropped = false;

  // Register event handlers
  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 = '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.innerHTML = event.dataTransfer.getData('text/plain');
  }
  
  function dragEndHandler (event) {
    if (!dropped) {
      status.innerHTML = 'Drag canceled';
    }
      
    data.innerHTML = 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);
      dropable.removeEventListener('dragover', dragOverHandler);
      dropable.removeEventListener('dragleave', dragLeaveHandler);
      dropable.removeEventListener('drop', dropHandler);
    }
  }

  function dragOverHandler (event) {
    status.innerHTML = 'Drop available';

    event.preventDefault();
  }
  
  function dragLeaveHandler (event) {
    status.innerHTML = 'Drag in process (drop was available)';
    
    event.preventDefault();
  }

  function dropHandler (event) {
    dropped = true;
    
    status.innerHTML = 'Drop done';

    event.preventDefault();

    // Get data linked to event format « text »
    var _data = event.dataTransfer.getData('text/plain');
    var 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.innerHTML = "I'm in the Drop Zone!";
  }
})

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'DataTransfer.clearData()' in that specification.
Living Standard  
HTML 5.1
The definition of 'DataTransfer.clearData()' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
clearDataChrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also