DataTransfer: метод clearData()

Базовая поддержка Широко распространена

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Метод DataTransfer.clearData() удаляет данные перетаскивания для заданного типа. Если данные для данного типа отсутствуют, метод ничего не делает.

Если этот метод вызывается без аргументов или формат — пустая строка, данные всех типов будут удалены.

Этот метод не удаляет файлы из операции перетаскивания, поэтому в списке DataTransfer.types объекта всё ещё может оставаться запись с типом "Files" если в перетаскивании участвуют файлы.

Примечание: Этот метод можно использовать только в обработчике события dragstart, поскольку только в этот момент данные операции перетаскивания могут быть изменены.

Синтаксис

clearData()
clearData(format)

Параметры

format Необязательно: Строка, определяющая тип данных для удаления. Если этот параметр является пустой строкой или не указан, данные всех типов будут удалены.

Возвращаемое значение

None (undefined).

Примеры

В этом примере показано использование методов объекта 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", () => {
  // Select HTML elements
  const draggable = document.getElementById("source");
  const droppable = document.getElementById("target");
  const status = document.getElementById("status");
  const data = document.getElementById("data");
  let dropped = false;

  // Register event handlers
  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 = "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.textContent = event.dataTransfer.getData("text/plain");
  }

  function dragEndHandler(event) {
    if (!dropped) {
      status.textContent = "Drag canceled";
    }

    data.textContent = 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);
      droppable.removeEventListener("dragover", dragOverHandler);
      droppable.removeEventListener("dragleave", dragLeaveHandler);
      droppable.removeEventListener("drop", dropHandler);
    }
  }

  function dragOverHandler(event) {
    status.textContent = "Drop available";

    event.preventDefault();
  }

  function dragLeaveHandler(event) {
    status.textContent = "Drag in process (drop was available)";

    event.preventDefault();
  }

  function dropHandler(event) {
    dropped = true;

    status.textContent = "Drop done";

    event.preventDefault();

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

Спецификации

Спецификация
HTML # dom-datatransfer-cleardata-dev

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`clearData`	3	12	3.5	≤12.1	4	18	4	≤12.1	3.2	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/clearData