Dragover - событие зажатия мышки.

"dragover" - оно же "ondragover". Событие dragover запускается, когда пользователь зажимает объект мышкой. Событие "dragover" заканчивается тогда, когда пользователь отпускает мышку!

Описание dragover.

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

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

Вообще... как ни странно, но все как попугаи говорят одно и тоже...

dragover - это "Вызов функции при перетаскивании элемента по целевому объекту перетаскивания".

Я не согласен с таким определением!

Что такое dragover:

Событие "dragover" наступает тогда, когда мышкой зажимается соответствующий объект, текст, картинка и т.д.

И продолжается до тех пор, пока вы не отпустите мышку.

И не важно, вы находитесь над объектом или покинули его!

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

<element ondragover="myScript">

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

object.ondragover = function(){myScript};

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

object . addEventListener("dragover", myScript);




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

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

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

draggable="true"

Два события:

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

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

И получаем:

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

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

function myFoo2( event ) {

example.innerHTML = "Вы зажали объект";

}

function myFoo( event ) {

example.innerHTML = "Вы отпустили";

}

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

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

Html:

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

Js:

<script>

function myFoo2( event ) {

example.innerHTML = "Вы зажали объект";

}

function myFoo( event ) {

example.innerHTML = "Вы отпустили";

}

</script>

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

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

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

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




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

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

Html:

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

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

Javascript :

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

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

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

new_area_3.ondragover = function(event) {

new_area_3. innerHTML = '№2 Вы отпустили';

};

new_area_3.ondragover = function(event) {

new_area_3. innerHTML = '№2 Вы зажали объект';

};

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

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

Html:

<div draggable="true" id=new_area_3>Запустите dragover...</div>

<div class="kod" id=send_3>Перетащите сюда.</div>

Javascript :

<script>

new_area_3.ondragend = function(event) {

new_area_3. innerHTML = '№2 Вы отпустили';

};

new_area_3.ondragover = function(event) {

new_area_3. innerHTML = '№2 Вы зажали объект';

};

</script>

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

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

Повозите по блоку.

Перетащите её в другое поле!

И отпустите.

Запустите dragover...
Перетащите сюда.



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

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

Используем тег div с id.

Любым из способов обратиться к тегу

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

<div id="draggable" draggable="true">Запустите dragover...</div>

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

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

//код

});

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

draggable. innerHTML = "Вы зажали объект";

Чтобы увидеть окончание события "dragover" - окончание перемещения, + используем "dragend".

draggable. innerHTML = "Вы отпустили";

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

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

Html:

<div id="draggable" draggable="true">Запустите dragover...</div>

Js:

<script>

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

draggable. innerHTML = "Вы зажали объект" ;

});

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

draggable. innerHTML = "Вы отпустили";

});

</script>

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

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

И потом отпустите мышку... - сработает "dragend".

Запустите dragover...