DataTransfer: свойство dropEffect

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

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

Свойство DataTransfer.dropEffect управляет обратной связью (обычно визуальной) пользователя во время операции перетаскивания и отпускания. Оно влияет на отображаемый курсор во время перетаскивания. Например, когда пользователь наводит курсор на элемент назначения, курсор браузера может указывать, какой тип операции произойдёт.

При создании объекта DataTransfer, dropEffect устанавливается в строковое значение. При получении возвращается его текущее значение. При установке, если новое значение является одним из значений, перечисленных ниже, текущее значение свойства устанавливается в новое значение, а другие значения игнорируются.

Для событий dragenter и dragover, dropEffect будет инициализировано на основе запрошенного пользователем действия. Способ определения зависит от платформы, но обычно пользователь может нажать клавиши модификаторов, такие как Alt, для корректировки желаемого действия. В обработчиках событий dragenter и dragover, dropEffect необходимо изменить, если желаемое действие отличается от запрошенного пользователем.

Для событий drop и dragend, dropEffect устанавливается на желаемое действие, которое будет значением, которое dropEffect имело после последнего события dragenter или dragover. В событии dragend, например, если желаемое dropEffect равно "переместить", то перетаскиваемый элемент должен быть удален из источника.

Значение

Строка, представляющая эффект операции перетаскивания. Возможные значения:

copy: Создается копия элемента источника в новом месте.
move: Элемент перемещается в новое место.
link: Создается ссылка на источник в новом месте.
none: Элемент нельзя опустить.

Присваивание любого другого значения dropEffect не оказывает никакого влияния, и старое значение сохраняется.

Пример

В этом примере показано использование свойств dropEffect и effectAllowed.

HTML

<div>
  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
  id="target"
  ondrop="drop_handler(event);"
  ondragover="dragover_handler(event);">
  Drop Zone
</div>

CSS

div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}

JavaScript

function dragstart_handler(ev) {
  console.log(
    `dragStart: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
  );

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function drop_handler(ev) {
  console.log(
    `drop: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
  );
  ev.preventDefault();

  // Get the id of the target and add the moved element to the target's DOM
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

function dragover_handler(ev) {
  console.log(
    `dragOver: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
  );
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

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

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

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

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