HTMLElement: событие dragleave

Событие dragleave срабатывает, когда перетаскиваемый элемент или выделенный текст покидают допустимую область для падения.

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

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

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

ondragleave = (event) => {};

Объект DragEvent. Наследуется от Event.

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

DragEvent.dataTransfer Только для чтения

Данные, которые передаются во время взаимодействия «перетащить и бросить».

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

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

Однако в этом частичном примере мы не реализовали опускание: для полного примера перетаскивания и опускания см. страницу события 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");
  }
});

Результат

• Другие события перетаскивания и опускания:

  • drag
  • dragstart
  • dragend
  • dragover
  • dragenter
  • drop