HTMLElement: событие dragenter

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

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

Событие dragenter срабатывает, когда перетаскиваемый элемент или выделенный текст попадает в допустимую зону выгрузки. Объект-мишень — это непосредственный выбор пользователя (элемент, прямо указанный пользователем как зона выгрузки), или элемент <body>.

Это событие может быть отменено и может быть передано вверх по иерархии к объектам Document и Window.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("dragenter", (event) => {});

ondragenter = (event) => {};

Тип события

Тип DragEvent. Наследуется от Event.

Свойства события

Помимо перечисленных ниже свойств, доступны свойства из родительского интерфейса Event.

DragEvent.dataTransfer Только для чтения: Данные, которые передаются во время взаимодействия перетаскивания и выгрузки.

Примеры

Стиль зон выгрузки при dragenter

В этом примере есть перетаскиваемый элемент внутри контейнера. Попробуйте взять элемент, перетащить его над другим контейнером и отпустить.

Мы прослушиваем событие dragenter чтобы при наведении перетаскиваемого элемента на другой контейнер изменить его фон на фиолетовый, сигнализируя о возможности выгрузки элемента в этот контейнер.

Однако в этом частичном примере мы не реализовали выгрузку: для полного примера перетаскивания и выгрузки см. страницу для события drag.

HTML

<div class="dropzone">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="drop-target"></div>

CSS

body {
  /* Prevent the user from selecting text in the example */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}

JavaScript

const target = document.getElementById("drop-target");
target.addEventListener("dragenter", (event) => {
  // highlight potential drop target when the draggable element enters it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});

Результат

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

Спецификация
HTML # ix-handler-ondragenter
HTML # event-dnd-dragenter

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`dragenter_event`	1	12	9	12	3.1	18	9	12	2	1.0	4.4

См. также

Другие события перетаскивания и выгрузки:
- drag
- dragstart
- dragend
- dragover
- dragleave
- drop

© 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/HTMLElement/dragenter_event