html подія ondrop

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

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

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

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

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

1. ondrag - спрацьовує, коли елемент тягнуть.

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

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

1. ondragenter - спрацьовує, коли перетягуваний елемент входить в зону елемента приймача.

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

1. ondragleave - спрацьовує, коли перетягуваний елемент покидає зону елемента приймача.

1. ondrop - спрацьовує, коли перетягуваний елемент кинуто на елемент приймач.

правити

Порада

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

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

Нотатка

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

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

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

Синтаксис

<element ondrop="script">

Переглядачі

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

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

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

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

Приклади

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

<p draggable="true">Перетягни мене в рамку ↓</p>
<div class="drop"
     ondragover="event.preventDefault()"
     ondrop="event.preventDefault(); this.textContent = 'Спіймано!'; console.log('drop')">
    Кинь сюди
</div>

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