JS властивість Event.dragover
Загальний опис
dragover — це подія, яка спрацьовує під час перетягування елемента над допустимою зоною скидання. Подія dragover є частиною API перетягування (Drag and Drop API) і дозволяє розробникам контролювати, що відбувається, коли елемент перетягується над певною областю. Однією з головних особливостей події dragover є те, що вона необхідна для дозволу скидання елемента в цільову зону. За замовчуванням браузери не дозволяють скидання в елемент, якщо не оброблена подія dragover. Тому важливо викликати event.preventDefault() у обробнику цієї події.
Для використання події dragover, розробник повинен додати обробник подій до елемента, який повинен бути цільовою зоною для скидання. Наприклад:
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', function(event) {
event.preventDefault(); // Дозволяє скидання елемента
dropZone.style.backgroundColor = 'lightblue'; // Візуальний індикатор
console.log('Елемент перетягується над зоною скидання.');
});
У цьому прикладі, коли елемент перетягується над зоною з ідентифікатором dropZone, подія dragover змінює колір фону на блакитний, вказуючи користувачу, що цю область можна використовувати для скидання. Використання event.preventDefault() є обов'язковим, оскільки це дозволяє браузеру обробляти подію скидання.
Подія dragover зазвичай використовується разом із іншими подіями Drag and Drop API, такими як dragenter (коли елемент входить у допустиму зону), dragleave (коли елемент покидає зону), і drop (коли елемент скидається в цільову зону). Вони разом дозволяють створювати інтерактивні веб-додатки, які підтримують операції перетягування і скидання, покращуючи користувацький досвід.
| Порада: | Для перевірки типу даних, що перетягується, використовуйте об'єкт |
| Порада: | Не використовуйте |
| Порада: | Використовуйте |
Синтаксис
element.addEventListener('dragover', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі зона скидання підсвічується зеленим кольором, коли користувач перетягує файли над нею, використовуючи подію dragover. Подія dragleave знімає підсвічування, коли файли покидають зону. Після скидання файли додаються до списку, і відображається загальна кількість файлів. Кнопка "Очистити" скидає список файлів і лічильник, забезпечуючи динамічний та інтерактивний користувацький інтерфейс.
У цьому прикладі, коли користувач перетягує елемент над зоною скидання, подія dragover підсвічує цю зону. Як тільки елемент покидає зону, подія dragleave видаляє підсвічування, забезпечуючи плавний візуальний ефект для користувача.
const dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragover', function(event) {
event.preventDefault();
dropArea.classList.add('highlight');
console.log('Перетягуваний елемент над зоною скидання.');
});
dropArea.addEventListener('dragleave', function(event) {
dropArea.classList.remove('highlight');
console.log('Перетягуваний елемент покинув зону скидання.');
});У цьому прикладі, коли користувач перетягує файли над зоною скидання, подія dragover перевіряє тип даних. Якщо тип даних допустимий (наприклад, файли), зона скидання підсвічується зеленим кольором; інакше — червоним. Це допомагає користувачу зрозуміти, які типи файлів підтримуються.
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', function(event) {
event.preventDefault();
if (event.dataTransfer.types.includes('Files')) {
dropZone.style.borderColor = 'green';
console.log('Допустимий тип даних перетягується.');
} else {
dropZone.style.borderColor = 'red';
console.log('Недопустимий тип даних.');
}
});
dropZone.addEventListener('dragleave', function(event) {
dropZone.style.borderColor = '#cccccc';
console.log('Елемент покинув зону скидання.');
});