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

23.03.2023 Марат 202 0 js|drag_drop|js_events

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

Описание dragend.

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

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

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

Метод addEventListener.

И DragEvent.

Синтаксис dragend:

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

ondragend = (event) => {};

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

Пример использования 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".

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

Пример использования 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".

Ну и далее, чтобы увидеть действие "ondragend" - зажмите мышкой ниже идущий текст.

И после некоторого перемещения - отпустите мышку...

Зажми мышку и перемести меня!