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

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

Описание dragstart.

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

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

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

Метод addEventListener.

И DragEvent.

Синтаксис dragstart:

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

ondragstart = (event) => {};

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

Использование dragstart в HTML:

<element ondragstart="myScript">

Использование dragstart в JavaScript:

object.ondragstart = function(){myScript};

Использование dragstart в JavaScript, применяя addEventListener():

object . addEventListener("dragstart", myScript);




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

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

В блок помещаем

draggable="true"

Два события прямо в теге:

ondragstart = "myFoo(event)" ondragend = "myFoo2(event)"

Используем ondragend, чтобы во время отпуская вы увидели окончание перетаскивая!

<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" - зажмите мышкой ниже идущий текст.

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

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




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

Для того, чтобы создать код с "ondragstart" = function вам потребуется:

Html:

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

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

Javascript :

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

И используем innerHTML, чтобы вывести в этот же "div" результат!

+ Используем ondragend, чтобы во время отпуская вы увидели окончание перетаскивая!

new_area_3.ondragstart = function(event) {

new_area_3. innerHTML = '№2 Вы начали перетаскивание';

};

new_area_3.ondragend = function(event) {

new_area_3. innerHTML = '№2 Вы закончили перетаскивание';

};

Соберем весь код использования ondragstart.

Код в сборе использования ondragstart.

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>

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

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

Нажмите мышку и перетащите...
Перетащите сюда.



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

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

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

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

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

+ Используем ondragend, чтобы во время отпуская вы увидели окончание перетаскивая!

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

//код

});

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

//код

});

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

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

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

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

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

Html:

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

Js:

<script>

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

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

});

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

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

});

</script>

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

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

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

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