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