Dragover - событие зажатия мышки.
"dragover" - оно же "ondragover". Событие dragover запускается, когда пользователь зажимает объект мышкой. Событие "dragover" заканчивается тогда, когда пользователь отпускает мышку!
Описание dragover.
- Что такое dragover - синтаксис.
- Пример использования ondragover
- Пример использования ondragover 2
- Пример использования 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" вам понадобится:
В блок помещаем :
Два события:
+ Используем dragend, чтобы во время отпуская вы увидели окончание "dragover"!
И получаем:
Пропишем каждую из функций:
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 вам потребуется:
Два div с индивидуальными "id".
В одном прописываем
Любым способом нужно обратиться к тегу.
И используем 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 + addEventListener
Для того, чтобы сделать пример с "dragover" вам понадобится:
Любым из способов обратиться к тегу
В div добавляем атрибут (draggable) со значением (true),чтобы разрешить перетаскивание элемента - у вас должно получиться так:
Если вы используете id, то к нему можно обратиться напрямую, к нему добавляем "addEventListener" внутрь помещаем "dragover":
draggable.addEventListener("dragover", (event) => {
//код
});
Далее... если "dragover" началось, то, что-то надо сделать, чтобы это увидеть... используем innerHTML для изменения текста на "Вы зажали объект"
Чтобы увидеть окончание события "dragover" - окончание перемещения, + используем "dragend".
Соберем весь код
Пример кода с "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".
Этим вы очень поможете проекту! Заранее огромное спасибо!
