ondragendСобытие

Примеры

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

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

Дополнительные примеры приведены в нижней части этой статьи.

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

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

Перетаскивание — очень распространённая функция в HTML5. Для получения дополнительной информации вы можете обратиться к нашему руководству по HTMLПеретаскивание в HTML5。

Примечание:Чтобы сделать элемент перетаскиваемым, необходимо использовать атрибут HTML5draggable.

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

Следующие события срабатывают во время процесса перетаскивания:

События, срабатывающие на цели перетаскивания(исходный элемент):
- ondragstart- Срабатывает, когда пользователь начинает перетаскивать элемент
- ondrag- Срабатывает, пока элемент перетаскивается
- ondragend - Срабатывает после того, как пользователь завершает перетаскивание элемента

События, возникающие на цели перетаскивания:
- ondragenter- Срабатывает, когда перетаскиваемый объект входит в область своего контейнера
- ondragover- Срабатывает, когда перетаскиваемый объект перемещается в пределах области контейнера другого объекта
- ondragleave- Срабатывает, когда перетаскиваемый объект покидает область своего контейнера
- ondrop- Срабатывает, когда кнопка мыши отпускается во время операции перетаскивания

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

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

Event
ondragend	4.0	9.0	3.5	6.0	12.0

Синтаксис

В HTML:

<element ondragend="myScript">Попробуйте сами

В JavaScript:

object.ondragend=function(){myScript};Попробуйте сами

В JavaScript с использованием метода addEventListener():

object.addEventListener("dragend", myScript);Попробуйте сами

Примечание:Internet Explorer 8 и более ранние версии IE не поддерживают методaddEventListener().

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

Всплывает:	Да
Отменяемое:	Нет
Тип события:	DragEvent
Поддерживаемые HTML-теги:	Все элементы HTML

Другие примеры

Пример

В следующем примере показаны все события перетаскивания:

/* при перетаскивании */
document.addEventListener("dragstart", function(event) {
//Метод dataTransfer.set() задаёт тип данных и перетаскиваемые данные
    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";
});
/* Срабатывает после завершения перетаскивания */
// Когда элемент p завершает перетаскивание и попадает в 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();
});
// Когда перетаскиваемый элемент p покидает droptarget, сбросьте стиль границы div
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/*Для drop предотвратите обработку данных браузером по умолчанию (ссылки по умолчанию открываются при drop)
Сбросьте цвет текста вывода и цвет границы DIV
Используйте метод dataTransfer.getData(), чтобы получить перетаскиваемые данные
Идентификатор перетаскиваемого элемента данных ("drag1")
Добавьте перетаскиваемый элемент в элемент drop*/
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));
    }
});

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