Dragend - событие окончания перетаскивания.

"dragend". Событие dragend запускается, когда пользователь заканчивает перетаскивание элемента или выделенного текста.

Описание dragend.

1. Что такое dragend - синтаксис.
2. Пример использования ondragend
3. Пример использования ondragend 2
4. Пример использования 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".

<p draggable="true" ondragstart = "myFoo(event)" ondragend = "myFoo2(event)" id=example>Зажми мышку и перемести меня!</p>

+ Используем 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 вам потребуется:

Html:

Два div с индивидуальными "id".

В одном прописываем draggable="true".

Javascript :

Любым способом нужно обратиться к тегу.

И используем 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 с id.

Любым из способов обратиться к тегу

В div добавляем атрибут (draggable) со значением (true),чтобы разрешить перетаскивание элемента - у вас должно получиться так:

<div id="draggable" draggable="true">Нажмите мышку и перетащите...</div>

Если вы используете id, то к нему можно обратиться напрямую, к нему добавляем "addEventListener" внутрь помещаем "dragend":

draggable.addEventListener("dragend", (event) => {

//код

});

Чтобы увидеть событие "dragend" - окончание перемещения, + используем "dragstart".

Далее... если перетаскивание кончилось, то, что-то надо сделать, чтобы это увидеть... используем innerHTML для изменения текста на "Вы закончили перетаскивание"

draggable. 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".

Нажмите мышку и перетащите...