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

22.03.2023 Марат 209 0 js|drag_drop|js_events

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

Описание dragstart.

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

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

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

Метод addEventListener.

И DragEvent.

Синтаксис dragstart:

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

ondragstart = (event) => {};

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

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

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

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

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

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


		draggable.addEventListener("dragstart", (event) => { 
		   //код
		});

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

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

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

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

Пример кода с "dragstart".


		Html:
<div id="draggable" draggable="true">Нажмите мышку и перетащите...</div>
		Js:
<script>
draggable.addEventListener("dragstart", (event) => { 
  draggable. innerHTML = "Вы начали перетаскивание";
});

draggable.addEventListener("dragend", (event) => { 
  draggable. innerHTML = "Вы закончили перетаскивание" ;
});
</script>

Пример выполнение кода с "dragstart".

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

И потом отпустите мышку..

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

Пример использования ondragstart

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

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

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

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


		function myFoo( event ) {
		     example.innerHTML = "Началось перемещение";  
		}

		function myFoo2( event ) {
		     example.innerHTML = "Закончилось перемещение";  
		}

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

Код примера "ondragstart".


		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>

Выполнение Кода примера "ondragstart".

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

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

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