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

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

Описание dragend.

1. Что такое dragend - синтаксис.
2. Пример использования dragend + addEventListener
3. Пример использования ondragend

1. Что такое dragend - синтаксис.

В синтаксисе "dragend" - используется два варианта:

Метод addEventListener.

И DragEvent.

Синтаксис dragend:

addEventListener("dragend", (event) => {});

ondragend = (event) => {};

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

2. Пример использования dragend + addEventListener

Для того, чтобы сделать пример с "dragend" вам потребуется:

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

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

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

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

//код

});

Маленькое отступление!

Для того, чтобы отследить событие "dragend" - окончание пермещения, нам нужно это перемещение начать, поэтому используем ещё и "dragstart" - иначе никак...

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

draggable. innerHTML = "Вы закончили перетаскивание";

+ добавим аналогичный код, но только с "dragstart", чтобы увидеть, когда перетаскивание началось...

Соберем весь код

Пример кода с "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".

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

3. Пример использования ondragend

Для того, чтобы сделать пример второго синтаксиса с "ondragend" вам понадобится:

Почти тоже самое, что и выше рассказанном пунтке, но, только часть "ondragend" - будет размещаться в теге:

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

Пропишем каждую из функций:

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

Всего комментариев : Comments+ 2.0

+ =