Событие ondragend
Пример
Запустить JavaScript, когда пользователь закончит перетаскивать элемент <p>:
<p draggable="true" ondragend="myFunction(event)">Тащи меня!</p>
Попробуйте сами »
Ещё примеры "Попробуйте сами" ниже.
Определение и использование
Событие ondragend
происходит, когда пользователь закончил перетаскивание элемента или выделения текста.
Перетаскивание drag и drop - очень распространенная функция в HTML5. Это когда вы "хватаете" объект и перетаскиваете его в другое место. Для получения дополнительной информации смотрите HTML Учебное Перетаскивание HTML5.
Примечание
Чтобы сделать элемент перетаскиваемым, используйте глобальный HTML5 атрибут draggable.
Совет
Ссылки и изображения можно перетаскивать по умолчанию, и им ненужен атрибут draggable.
Существует множество событий, которые используются и могут происходить на различных этапах операции перетаскивания:
- События, запускаемые на перетаскиваемой цели (исходный элемент):
- ondragstart - возникает, когда пользователь начинает перетаскивать элемент
- ondrag - возникает при перетаскивании элемента
- ondragend - происходит, когда пользователь закончил перетаскивание элемента
- События, запущенные по цели сброса:
- ondragenter - возникает, когда перетаскиваемый элемент попадает в цель перетаскивания
- ondragover - возникает, когда перетаскиваемый элемент находится над целью перетаскивания
- ondragleave - возникает, когда перетаскиваемый элемент покидает цель перетаскивания
- ondrop - возникает, когда перетаскиваемый элемент отбрасывается на цель отбрасывания
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает событие.
Событие | |||||
---|---|---|---|---|---|
ondragend | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Синтаксис
В JavaScript, используйте метод addEventListener():
object.addEventListener("dragend", myScript);
Попробуйте сами »
Технические подробности
Пузыри: | Да |
---|---|
Отменяемый: | Нет |
Тип события: | DragEvent |
Поддержка HTML тегов: | Все HTML элементы |
DOM Версия: | События 3 уровня |
Ещё примеры
Пример
Демонстрация ВСЕХ возможных событий перетаскивания:
<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";
});
// События, запущенные по цели сброса
// Когда перетаскиваемый элемент 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 покинет цель перетаскивания, сбросьте стиль границы 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 Учебник: HTML5 Drag и Drop
HTML Справочник: HTML Атрибут draggable