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 є важливою для створення динамічних та інтерактивних інтерфейсів, де користувачі можуть перетягувати і скидати елементи. Вона допомагає розробникам надавати користувачам чіткі візуальні підказки, забезпечуючи інтуїтивно зрозумілий досвід роботи.
- Порада
-
Завжди використовуйте подію
автор: Bonddragleaveдля скидання стилів або станів, які були змінені під час перетягування. Наприклад, ви можете видалити клас, який підсвічує зону скидання, коли перетягуваний елемент покидає цю зону. - Порада
-
Використовуйте подію
автор: Bonddragleaveдля оновлення інтерфейсу користувача в режимі реального часу, видаляючи візуальні підказки, коли перетягуваний елемент більше не перебуває в допустимій зоні. Це допоможе запобігти помилковим враженням користувача про можливість скидання. - Порада
-
Використовуйте метод
автор: Bondevent.preventDefault()у подіїdragenterабоdragover, щоб дозволити скидання елемента, але у подіїdragleaveвін зазвичай не потрібний. Це дозволяє уникнути непередбачуваних побічних ефектів і забезпечити коректну роботу механізмів перетягування.
Синтаксис
element.addEventListener('dragleave', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 9 | 3.1 | 12 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 9 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі, коли користувач перетягує файли в зону завантаження, подія dragenter підсвічує зону, вказуючи на можливість скидання файлів. Подія dragleave видаляє підсвічування, коли файли покидають межі зони. Якщо файли успішно скинуті, вони додаються в список, а кнопка "Очистити" дозволяє видалити всі елементи зі списку, що покращує зручність використання та інтерфейс користувача.
HTML
<header>
<h2 class="title">dragleave (HTML Event)</h2>
<p class="description">Спрацьовує, коли перетягуваний елемент покидає межі цільового елемента.</p>
</header>
<main>
<div class="result">
<div id="fileDropZone" class="drop-zone">
Перетягніть файли сюди
</div>
<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 clearButton = document.getElementById('clearButton');
dropZone.addEventListener('dragenter', function (event) {
event.preventDefault();
dropZone.classList.add('over');
console.log('Файли увійшли в зону завантаження.');
});
dropZone.addEventListener('dragover', function (event) {
event.preventDefault(); // Дозволяє скидання файлів
});
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);
}
console.log('Файли успішно скинуті.');
});
clearButton.addEventListener('click', function () {
fileList.innerHTML = '';
console.log('Список файлів очищено.');
});
});
//# sourceURL=pen.jsУ цьому прикладі цільова зона змінює свій бордюр на зелений при вході перетягуваного елемента і повертається до чорного, коли елемент покидає зону. Це забезпечує динамічний інтерфейс користувача з чіткими візуальними індикаторами.
HTML
<div id="dropArea">Демонстраційний елемент</div>JS
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('Перетягуваний елемент покинув зону.');
});У цьому прикладі, коли перетягуваний елемент входить у зону скидання, користувач отримує повідомлення, що можна скинути елемент. Коли елемент покидає зону, текст змінюється, і фонова підсвітка стає червоною, щоб показати, що зона більше не приймає скидання. Це допомагає уникнути непорозумінь і покращує користувацький досвід.
HTML
<div id="dropZone">Демонстраційний елемент</div>
<div id="statusMessage">Демонстраційний елемент</div>JS
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';
});Коментарі
Коментарів ще немає — будьте першим!