DataTransfer: метод getData()

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

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

Метод DataTransfer.getData() извлекает данные перетаскивания (в виде строки) для указанного типа. Если операция перетаскивания не содержит данных, метод возвращает пустую строку.

Примеры типов данных — text/plain и text/uri-list.

Синтаксис

getData(format)

Параметры

format: Строка, представляющая тип данных для извлечения.

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

Строка, представляющая данные перетаскивания для указанного format. Если операция перетаскивания не содержит данных или данных для указанного format, метод возвращает пустую строку.

Ограничения

Доступность данных

Спецификация HTML перетаскивания и опускания определяет режим хранения данных. Это может привести к неожиданному поведению, так как некоторые браузеры не обеспечивают этого ограничения, а значит, метод DataTransfer.getData() может не вернуть ожидаемое значение.

Безопасно получить доступ к данным во время событий dragstart и drop. В остальных случаях данные следует считать недоступными. Несмотря на это, элементы и их форматы все равно можно перечислить.

Примеры

В этом примере показано использование методов объекта DataTransfer getData() и setData().

HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <span id="drag" draggable="true" ondragstart="drag(event)"
    >drag me to the other box</span
  >
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS

#div1,
#div2 {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

JavaScript

function allowDrop(allowDropEvent) {
  allowDropEvent.target.style.color = "blue";
  allowDropEvent.preventDefault();
}

function drag(dragEvent) {
  dragEvent.dataTransfer.setData("text", dragEvent.target.id);
  dragEvent.target.style.color = "green";
}

function drop(dropEvent) {
  dropEvent.preventDefault();
  const data = dropEvent.dataTransfer.getData("text");
  dropEvent.target.appendChild(document.getElementById(data));
  document.getElementById("drag").style.color = "black";
}

Результат

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getData`	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/getData