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 (коли елемент скидається в цільову зону). Вони разом дозволяють створювати інтерактивні веб-додатки, які підтримують операції перетягування і скидання, покращуючи користувацький досвід.

правити

Порада

Для перевірки типу даних, що перетягується, використовуйте об'єкт DataTransfer всередині обробника dragover. Це дозволить обмежити типи даних, які можуть бути скинуті у певну зону.

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

Порада

Не використовуйте dragover для виконання важких операцій, таких як складні обчислення або зміни в DOM, оскільки це може сповільнити інтерфейс. Подія повинна бути швидкою та простою.

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

Порада

Використовуйте dragover для додавання візуальних індикаторів, таких як зміна кольору або стилю, щоб вказати користувачу, що область може бути зоною скидання. Це покращить взаємодію користувача з інтерфейсом.

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

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

Синтаксис

element.addEventListener('dragover', function(event) {
  // Ваш код тут
});

Переглядачі

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

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

Переглядач
	1	9	3.1	12	12	9

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

Переглядач
	4.4	18	9	2

Приклади

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

<div id="dropZone">Демонстраційний елемент</div>

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('Елемент покинув зону скидання.');
});

<div id="dropArea">Демонстраційний елемент</div>

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('Перетягуваний елемент покинув зону скидання.');
});