Dragend - событие окончания перетаскивания.
"dragend". Событие dragend запускается, когда пользователь заканчивает перетаскивание элемента или выделенного текста.
Описание dragend.
- Что такое dragend - синтаксис.
- Пример использования ondragend
- Пример использования ondragend 2
- Пример использования dragend + addEventListener
Что такое dragend - синтаксис.
В синтаксисе "dragend" - используется два варианта:
Метод addEventListener.
И DragEvent.
Синтаксис dragend:
addEventListener("dragend", (event) => {});
ondragend = (event) => {};
Для того, чтобы понять, как работает dragend нам понадобится два примера: где разберем эти два "синтаксиса dragend"
Использование dragend в HTML:
<element ondragend="myScript">
Использование dragend в JavaScript:
object.ondragend = function(){myScript};
Использование dragend в JavaScript, применяя addEventListener():
object . addEventListener("dragend", myScript);
Пример использования ondragend
Начнем с первого синтаксиса с "ondragend" и вам понадобится:
Блок html, пусть это будет p, туда помещаем:
draggable="true"
+ ondragstart = "myFoo(event)"
+ ondragend = "myFoo2(event)"
+ id=example
И получаем готовый блок с "dragend".
+ Используем dragstart, чтобы во время отпуская вы увидели окончание перетаскивая!
Пропишем каждую из функций:
function myFoo( event ) {
example.innerHTML = "Началось перемещение";
}
function myFoo2( event ) {
example.innerHTML = "Закончилось перемещение";
}
Соберем весь код вместе:
Код примера "ondragend".
Html:
<p draggable="true" ondragstart = "myFoo(event)" ondragend = "myFoo2(event)" id=example>Зажми мышку и перемести меня!</p>
Js:
<script>
function myFoo( event ) {
example.innerHTML = "Началось перемещение";
}
function myFoo2( event ) {
example.innerHTML = "Закончилось перемещение";
}
</script>
Выполнение Кода примера "ondragend".
Ну и далее, чтобы увидеть действие "ondragend" - зажмите мышкой ниже идущий текст.
И после некоторого перемещения - отпустите мышку...
Зажми мышку и перемести меня!
Пример 2 использования ondragend.
Для того, чтобы создать код с "ondragend" = function вам потребуется:
Два div с индивидуальными "id".
В одном прописываем
Любым способом нужно обратиться к тегу.
И используем innerHTML, чтобы вывести в этот же "div" результат!
+ Используем dragstart, чтобы во время отпуская вы увидели окончание перетаскивая!
new_area_3.ondragend = function(event) {
new_area_3. innerHTML = '№2 Вы начали перетаскивание';
};
new_area_3.ondragend = function(event) {
new_area_3. innerHTML = '№2 Вы закончили перетаскивание';
};
Соберем весь код использования ondragend.
Код в сборе использования ondragend.
Html:
<div draggable="true" id=new_area_3>Нажмите мышку и перетащите...</div>
<div class="kod" id=send_3>Перетащите сюда.</div>
Javascript :
<script>
new_area_3.ondragstart = function(event) {
new_area_3. innerHTML = '№2 Вы начали перетаскивание';
};
new_area_3.ondragend = function(event) {
new_area_3. innerHTML = '№2 Вы закончили перетаскивание';
};
</script>
Пример использования ondragend.
Для того, чтобы увидеть результат работы "ondragend" - нажмите мышку по соответствующей надписи и перетащите её в другое поле!
Пример использования dragend + addEventListener
Для того, чтобы сделать пример с "dragend" вам понадобится:
Любым из способов обратиться к тегу
В div добавляем атрибут (draggable) со значением (true),чтобы разрешить перетаскивание элемента - у вас должно получиться так:
Если вы используете id, то к нему можно обратиться напрямую, к нему добавляем "addEventListener" внутрь помещаем "dragend":
draggable.addEventListener("dragend", (event) => {
//код
});
Чтобы увидеть событие "dragend" - окончание перемещения, + используем "dragstart".
Далее... если перетаскивание кончилось, то, что-то надо сделать, чтобы это увидеть... используем innerHTML для изменения текста на "Вы закончили перетаскивание"
Соберем весь код
Пример кода с "dragend".
Html:
<div id="draggable" draggable="true">Нажмите мышку и перетащите...</div>
Js:
<script>
draggable.addEventListener("dragstart", (event) => {
draggable. innerHTML = "Вы начали перетаскивание";
});
draggable.addEventListener("dragend", (event) => {
draggable. innerHTML = "Вы закончили перетаскивание" ;
});
</script>
Пример выполнение кода с "dragstart".
Для того, чтобы увидеть действие "dragend" зажмите ниже идущий текст и попробуйте его перетащить...
И потом отпустите мышку... - в этот момент сработает "dragend".
Этим вы очень поможете проекту! Заранее огромное спасибо!
18.01.2026 12:19
