当前位置：文江博客知识库简体中文文档 Web API DataTransfer clearData

DataTransfer.clearData() - Web API 接口参考编辑

DataTransfer.clearData() 方法删除给定类型的拖动操作的drag data。如果给定类型的数据不存在，则此方法不执行任何操作。

如果没有参数调用此方法，或者格式为空，则将删除所有类型的数据。

此方法不会从拖动操作中删除文件，因此如果有任何文件包含在对象的DataTransfer.types列表中，仍然可能有一个类型为“Files”的条目在拖动。

该方法只能在dragstart 事件的处理程序中使用，因为这是拖动操作的数据存储只能写入的时间。

句法

DataTransfer.clearData([format]);

参数

format 可选: 一个 string指定要删除的数据类型。如果此参数为空字符串或未提供，则将删除所有类型的数据。

范例

这个例子显示了使用DataTransfer对象的getData(), setData() 和clearData() 和

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!";
  }
})

规范

Specification	Status	Comment
HTML Living Standard DataTransfer.clearData()	Living Standard
HTML 5.1 DataTransfer.clearData()	Recommendation	Initial definition

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!