Подія dragover в JavaScript — перетягування над блоком
Загальний опис
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 (коли елемент скидається в цільову зону). Вони разом дозволяють створювати інтерактивні веб-додатки, які підтримують операції перетягування і скидання, покращуючи користувацький досвід.
- Порада
-
Для перевірки типу даних, що перетягується, використовуйте об'єкт
автор: BondDataTransferвсередині обробникаdragover. Це дозволить обмежити типи даних, які можуть бути скинуті у певну зону. - Порада
-
Не використовуйте
автор: Bonddragoverдля виконання важких операцій, таких як складні обчислення або зміни в DOM, оскільки це може сповільнити інтерфейс. Подія повинна бути швидкою та простою. - Порада
-
Використовуйте
автор: Bonddragoverдля додавання візуальних індикаторів, таких як зміна кольору або стилю, щоб вказати користувачу, що область може бути зоною скидання. Це покращить взаємодію користувача з інтерфейсом.
Синтаксис
element.addEventListener('dragover', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 9 | 3.1 | 12 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 9 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі, коли користувач перетягує файли над зоною скидання, подія dragover перевіряє тип даних. Якщо тип даних допустимий (наприклад, файли), зона скидання підсвічується зеленим кольором; інакше — червоним. Це допомагає користувачу зрозуміти, які типи файлів підтримуються.
HTML
<div id="dropZone">Демонстраційний елемент</div>JS
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('Елемент покинув зону скидання.');
});У цьому прикладі зона скидання підсвічується зеленим кольором, коли користувач перетягує файли над нею, використовуючи подію dragover. Подія dragleave знімає підсвічування, коли файли покидають зону. Після скидання файли додаються до списку, і відображається загальна кількість файлів. Кнопка "Очистити" скидає список файлів і лічильник, забезпечуючи динамічний та інтерактивний користувацький інтерфейс.
HTML
<header>
<h2 class="title">dragover (HTML Event)</h2>
<p class="description">Активує подію під час перетягування елемента над зоною призначення.</p>
</header>
<main>
<div class="result">
<div id="fileDropZone" class="drop-zone">
Перетягніть файли сюди
</div>
<p id="fileCount">Кількість файлів: 0</p>
<ul id="fileList" class="file-list">
<!-- Список завантажених файлів буде тут -->
</ul>
<button id="clearButton">Очистити</button>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
text-align: center;
}
.drop-zone {
width: 100%;
height: 150px;
margin-bottom: 15px;
border: 2px dashed #007bff;
background-color: #f8f8f8;
line-height: 150px;
text-align: center;
color: #999;
transition: background-color 0.3s, border-color 0.3s;
}
.drop-zone.over {
background-color: #e0ffe0;
border-color: #00b300;
}
.file-list {
list-style-type: none;
padding: 0;
margin-top: 15px;
text-align: left;
}
.file-list li {
padding: 8px;
border-bottom: 1px solid #ddd;
color: #333;
}
button {
margin-top: 15px;
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #c0392b;
}JS
document.addEventListener('DOMContentLoaded', function () {
const dropZone = document.getElementById('fileDropZone');
const fileList = document.getElementById('fileList');
const fileCount = document.getElementById('fileCount');
const clearButton = document.getElementById('clearButton');
let count = 0;
dropZone.addEventListener('dragover', function (event) {
event.preventDefault();
dropZone.classList.add('over');
console.log('Файли перетягуються над зоною завантаження.');
});
dropZone.addEventListener('dragleave', function (event) {
dropZone.classList.remove('over');
console.log('Файли покинули зону завантаження.');
});
dropZone.addEventListener('drop', function (event) {
event.preventDefault();
dropZone.classList.remove('over');
const files = event.dataTransfer.files;
for (const file of files) {
const listItem = document.createElement('li');
listItem.textContent = `Файл: ${file.name} (${file.size} байт)`;
fileList.appendChild(listItem);
}
count += files.length;
fileCount.textContent = `Кількість файлів: ${count}`;
console.log('Файли успішно скинуті.');
});
clearButton.addEventListener('click', function () {
fileList.innerHTML = '';
count = 0;
fileCount.textContent = 'Кількість файлів: 0';
console.log('Список файлів очищено.');
});
});
//# sourceURL=pen.jsУ цьому прикладі, коли користувач перетягує елемент над зоною скидання, подія dragover підсвічує цю зону. Як тільки елемент покидає зону, подія dragleave видаляє підсвічування, забезпечуючи плавний візуальний ефект для користувача.
HTML
<div id="dropArea">Демонстраційний елемент</div>JS
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('Перетягуваний елемент покинув зону скидання.');
});Коментарі
Коментарів ще немає — будьте першим!