JS властивість Event.dragenter

Загальний опис

dragenter — це подія, яка спрацьовує, коли перетягуваний елемент вперше входить у межі цільового елемента. Ця подія є частиною Drag and Drop API і дозволяє розробникам керувати поведінкою веб-сторінки, коли користувач перетягує елемент на певну область. Подія dragenter часто використовується для візуального підсвічування зони скидання, індикації користувачу, що цей елемент є допустимою ціллю для перетягування, або для виконання інших дій, коли об'єкт входить у допустиму область.

Щоб використовувати подію dragenter, елемент повинен мати атрибут draggable="true" (для елементів, які можуть бути перетягнуті) і обробник подій, прив'язаний до цільового елемента. Наприклад:

const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragenter', function(event) {
  event.preventDefault(); // Дозволяє скидання елемента
  dropZone.style.backgroundColor = 'lightblue';
  console.log('Перетягуваний елемент увійшов у зону скидання.');
});

У цьому прикладі, коли перетягуваний елемент входить у зону скидання з ідентифікатором dropZone, колір фону змінюється на блакитний, що візуально підказує користувачу про можливість скидання елемента. Метод event.preventDefault() запобігає стандартній поведінці браузера, яка може перешкоджати операціям перетягування.

Подія dragenter працює разом з іншими подіями Drag and Drop API, такими як dragover, dragleave, drop та dragend, щоб забезпечити повний контроль над операціями перетягування і скидання. Наприклад, dragover спрацьовує, коли перетягуваний елемент рухається над допустимою цільовою зоною, а dragleave — коли він покидає цю зону. Використання dragenter дозволяє забезпечити плавний і зрозумілий користувачам досвід при роботі з елементами перетягування.

правити

Порада

Використовуйте подію dragenter разом із dragleave для точного контролю візуальних ефектів. Наприклад, ви можете змінити колір фону цільової зони при вході в неї перетягуваного елемента і повернути його до початкового стану при виході.

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

Порада

Завжди перевіряйте тип перетягуваних даних у обробнику подій dragenter. Це дозволяє вам переконатися, що цільова зона приймає лише відповідні типи даних, наприклад, тільки зображення або тільки текст.

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

Приклади

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

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

const dropArea = document.getElementById('dropArea');

dropArea.addEventListener('dragenter', function(event) {
  event.preventDefault();
  dropArea.classList.add('highlight');
  console.log('Перетягуваний елемент увійшов у зону скидання.');
});

dropArea.addEventListener('dragleave', function(event) {
  dropArea.classList.remove('highlight');
  console.log('Перетягуваний елемент покинув зону скидання.');
});

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

const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragenter', function(event) {
  event.preventDefault();
  if (event.dataTransfer.types.includes('text/plain')) {
    dropZone.style.borderColor = 'green';
    console.log('Допустимий тип даних увійшов у зону скидання.');
  } else {
    dropZone.style.borderColor = 'red';
    console.log('Недопустимий тип даних увійшов у зону скидання.');
  }
});

dropZone.addEventListener('dragleave', function(event) {
  dropZone.style.borderColor = 'gray';
  console.log('Елемент покинув зону скидання.');
});