html подія ondragover

Подія ondragover періодично викликається, коли перетягуваний елемент або виділений текст знаходиться в зоні призначення.

Без задання дані або елементи не можуть бути кинуті в інші елементи. Щоб виправити це, ми повинні запобігти обробці елемента без задання. Це робиться шляхом виклику метода event.preventDefault () для ondragover події.

Дії тягнути та кидати (drag and drop) дуже схожі в HTML5. Це коли ви "захопити" об'єкт та перетягуєте його в інше місце.

Є багато подій, які використовуються, і можуть статися в різних стадіях операції перетягування (drag and drop):

Події котрі викликаються при перетягуванні елемента:

1. ondragstart - спрацьовує, коли користувач починає перетягувати елемент.
2. ondrag - спрацьовує, коли елемент тягнуть.
3. ondragend - спрацьовує, коли користувач закінчив перетягування.

Події котрі викликаються при падіння елемента на ціль:

1. ondragenter - спрацьовує, коли перетягуваний елемент входить в зону елемента приймача.
2. ondragover - спрацьовує, коли перетягуваний елемент знаходить в зоні елемента приймача.
3. ondragleave - спрацьовує, коли перетягуваний елемент покидає зону елемента приймача.
4. ondrop - спрацьовує, коли перетягуваний елемент rbyenj на елемент приймач.

правити

Порада

Для того, щоб елемент було можливо перетягувати, використовуйте глобальний HTML5 атрибут draggable.

автор: NagarD правити

Порада

Посилання та зображення доступні для перетягування без задання, їм не потрібно присвоювати глобальний HTML5 атрибут draggable.

автор: NagarD правити

Нотатка

При перетягуванні елементу, подія ondragover спрацьовує кожні 350 мілісекунд.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

<element ondragover="script">

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	4.0+	3.5+	6.0+	12.0+	9.0+

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<p draggable="true">Потягай цей текст над рамкою ↓</p>
<div class="drop" ondragover="console.log('dragover')">Зона</div>

.drop {
    height: 80px;
    border: 2px dashed #0172ad;
    padding: 8px;
}