Подія 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 дозволяє забезпечити плавний і зрозумілий користувачам досвід при роботі з елементами перетягування.
- Порада
-
Використовуйте подію
автор: Bonddragenterразом ізdragleaveдля точного контролю візуальних ефектів. Наприклад, ви можете змінити колір фону цільової зони при вході в неї перетягуваного елемента і повернути його до початкового стану при виході. - Порада
-
Завжди перевіряйте тип перетягуваних даних у обробнику подій
автор: Bonddragenter. Це дозволяє вам переконатися, що цільова зона приймає лише відповідні типи даних, наприклад, тільки зображення або тільки текст. - Порада
-
Не використовуйте
автор: Bonddragenterдля виконання важких операцій, таких як обробка великих даних або складних обчислень. Подія повинна бути легкою і швидкою, щоб забезпечити плавність роботи інтерфейсу користувача.
Синтаксис
element.addEventListener('dragenter', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 9 | 3.1 | 12 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 9 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі цільова зона підсвічується, коли перетягуваний елемент входить у неї, і повертається до початкового стану, коли елемент покидає зону. Це забезпечує зручне візуальне сприйняття для користувача під час перетягування.
HTML
<div id="dropArea">Демонстраційний елемент</div>JS
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('Перетягуваний елемент покинув зону скидання.');
});У цьому прикладі, коли перетягуваний елемент входить у зону скидання, перевіряється тип даних, що перетягується. Якщо тип даних допустимий, колір бордюру змінюється на зелений, інакше — на червоний. Це допомагає користувачу зрозуміти, чи може він скинути елемент у цю зону.
HTML
<div id="dropZone">Демонстраційний елемент</div>JS
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('Елемент покинув зону скидання.');
});У цьому прикладі, коли користувач перетягує файли в область завантаження, подія dragenter підсвічує зону скидання іншим кольором, щоб показати, що скидання дозволено. Після завершення перетягування і скидання файлів у цільову зону, файли додаються в список під зоною завантаження. Кнопка "Очистити" видаляє всі завантажені файли зі списку, забезпечуючи зручність для користувача.
HTML
<header>
<h2 class="title">dragenter (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Коментарі
Коментарів ще немає — будьте першим!