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

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

Описание dragstart.

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

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

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

Метод addEventListener.

И DragEvent.

Синтаксис dragstart:

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

ondragstart = (event) => {};

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

2. Пример использования 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" зажмите ниже ижущий текст и попробуйте его перетащить...

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

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

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

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

+ =