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 дозволяє забезпечити плавний і зрозумілий користувачам досвід при роботі з елементами перетягування.
| Порада: | Використовуйте подію |
| Порада: | Завжди перевіряйте тип перетягуваних даних у обробнику подій |
| Порада: | Не використовуйте |
Синтаксис
element.addEventListener('dragenter', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі, коли користувач перетягує файли в область завантаження, подія dragenter підсвічує зону скидання іншим кольором, щоб показати, що скидання дозволено. Після завершення перетягування і скидання файлів у цільову зону, файли додаються в список під зоною завантаження. Кнопка "Очистити" видаляє всі завантажені файли зі списку, забезпечуючи зручність для користувача.
У цьому прикладі цільова зона підсвічується, коли перетягуваний елемент входить у неї, і повертається до початкового стану, коли елемент покидає зону. Це забезпечує зручне візуальне сприйняття для користувача під час перетягування.
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('Перетягуваний елемент покинув зону скидання.');
});У цьому прикладі, коли перетягуваний елемент входить у зону скидання, перевіряється тип даних, що перетягується. Якщо тип даних допустимий, колір бордюру змінюється на зелений, інакше — на червоний. Це допомагає користувачу зрозуміти, чи може він скинути елемент у цю зону.
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('Елемент покинув зону скидання.');
});