Событие ondragend

События DOM DragEvent

Определение и использование

Когда пользователь завершает перетаскивание элемента или текстового выбора, происходит событие ondragend.

Перетаскивание - это очень распространенная функция в HTML5. Это когда вы "хватаете" объект и перетаскиваете его в другое место. Чтобы узнать больше, читайте наши статьи о Перетаскивание HTML5HTML руководство.

Комментарий:Чтобы сделать элемент перетаскиваемым, используйте глобальное Свойство draggable HTML5。

Совет:По умолчанию, ссылки и изображения перетаскиваются, и не требуется свойство draggable.

В различных этапах операции перетаскивания используются множество событий, и могут произойти:

События, запускаемые на источнике (элементе):

  • ondragstart - когда пользователь начинает перетаскивать элемент
  • ondrag - когда элемент перетаскивается
  • ondragend - когда пользователь завершает перетаскивание элемента

События, запускаемые на целевой точке:

  • ondragenter - когда перетаскиваемый элемент enters целевую точку
  • ondragover - когда перетаскиваемый элемент находится на целевой точке
  • ondragleave - когда перетаскиваемый элемент удаляется от целевой точки
  • ondrop - когда перетаскиваемый элемент放置ен на целевую точку

Пример

Когда пользователь завершает перетаскивание элемента <p>, выполняется JavaScript:

<p draggable="true" ondragend="myFunction(event)">Перетащите меня!</p>

Попробуйте сами

Ниже страницы есть больше примеров TIY.

Грамматика

В HTML:

<элемент ondragend="myScript">

Попробуйте сами

В JavaScript:

объект.ondragend = function(){myScript};

Попробуйте сами

В JavaScript, используйте метод addEventListener():

объект.addEventListener("dragend", myScript);

Попробуйте сами

Комментарий:Internet Explorer 8 и более ранние версии не поддерживают Метод addEventListener()。

Технические детали

Бублящее: Поддерживается
Отменяемое: Не поддерживается
Тип события: DragEvent
Поддерживаемые HTML теги: Все HTML элементы
Версия DOM: Уровень 3 событий

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает это событие.

Событие Chrome IE Firefox Safari Opera
ondragend 4.0 9.0 3.5 6.0 12.0

Более примеров

Демонстрация всех возможных событий перетаскивания:

<p draggable="true" id="dragtarget">Перетащите меня!</p>
<div class="droptarget">Сбросьте здесь!</div>
<script>
/* ----------------- События, инициируемые на цели перетаскивания ----------------- */
document.addEventListener("dragstart", function(event) {
  // Метод dataTransfer.setData() устанавливает тип и значение данных, передаваемых при перетаскивании
  event.dataTransfer.setData("Text", event.target.id);
  // При начале перетаскивания элемента p выводится текст
  document.getElementById("demo").innerHTML = "Начато перетаскивание элемента p.";
  // Изменяется непрозрачность перетаскиваемого элемента
  event.target.style.opacity = "0.4";
});
// При перетаскивании элемента p изменяется цвет выводимого текста
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// После завершения перетаскивания элемента p выводится текст и восстанавливается непрозрачность
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Завершено перетаскивание элемента p.";
  event.target.style.opacity = "1";
});
/* ----------------- События, возникающие при放置е на целевую область ----------------- */
// При входе в droptarget элемента, который можно перетаскивать, изменить стиль рамки DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// По умолчанию данные/элементы не могут быть размещены в других элементах. Чтобы разрешить размещение, необходимо阻止 стандартную обработку элементов
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// При выходе из droptarget элемента, который можно перетаскивать, сбросить стиль рамки DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* При放置 - предотвратить стандартную обработку данных браузером (по умолчанию данные открываются как ссылка)
Сбросить цвет текста и цвет рамки DIV
Получите данные перетаскивания с помощью метода dataTransfer.getData()
Перетаскиваемые данные - это идентификатор элемента, который перетаскивают ("drag1")
Прикрепить элемент, который перетаскивают, к элементу назначения
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

Попробуйте сами

Соответствующие страницы

Урок HTML: drag-and-drop в HTML5

HTML справочник: атрибут draggable HTML

События DOM DragEvent