JS властивість Event.drop
Загальний опис
drop — це подія, яка спрацьовує, коли перетягуваний елемент скидається в цільову зону. Ця подія є частиною Drag and Drop API і дозволяє розробникам визначити, що станеться після скидання елемента. Подія drop використовується для обробки даних, переданих під час перетягування, і виконання відповідних дій, таких як оновлення інтерфейсу користувача, додавання елементів у DOM, або передача даних на сервер.
Для обробки події drop, цільовий елемент повинен мати атрибут ondrop або доданий обробник через addEventListener. Крім того, потрібно обробляти події dragover і dragenter, щоб дозволити скидання елемента в цільову зону, викликаючи event.preventDefault(). Наприклад:
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', function(event) {
event.preventDefault(); // Дозволяє скидання елемента
});
dropZone.addEventListener('drop', function(event) {
event.preventDefault(); // Запобігає стандартній поведінці браузера
const data = event.dataTransfer.getData('text/plain');
dropZone.textContent = `Скинуто: ${data}`;
console.log('Елемент успішно скинуто.');
});
У цьому прикладі, коли елемент перетягується в зону з ідентифікатором dropZone і скидається, подія drop спрацьовує і відображає дані, що були передані під час перетягування. event.dataTransfer.getData('text/plain') використовується для отримання даних, які були встановлені раніше в події dragstart.
Подія drop є ключовою для реалізації функціоналу перетягування та скидання, оскільки вона дозволяє розробникам повністю контролювати, що станеться після завершення операції перетягування. Вона забезпечує необхідні засоби для передачі даних між різними частинами інтерфейсу або навіть між різними веб-додатками.
- Порада
-
Завжди очищайте стилі і клас цільових зон після події
автор: Bonddrop. Це допоможе підтримувати акуратний і зрозумілий інтерфейс користувача. - Порада
-
Використовуйте подію
автор: Bonddropдля додавання нових елементів до DOM або оновлення існуючих. Це може бути корисно для створення інтерактивних списків або галерей. - Порада
-
Перевіряйте типи даних під час обробки події
автор: Bonddrop. Це дозволить уникнути непередбачених поведінок або помилок, особливо коли підтримуються різні формати даних.
Синтаксис
element.addEventListener('drop', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 9 | 3.1 | 12 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 9 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі, коли користувач перетягує файли в зону скидання, подія dragover підсвічує цю зону. Після скидання файли обробляються подією drop, яка перевіряє типи файлів і відображає прев'ю зображень у зоні перегляду. Кнопка "Очистити зону" дозволяє користувачам очищати результати скидання, видаляючи всі прев'ю. Цей приклад ідеально підходить для створення інтерактивних інтерфейсів користувача, що підтримують функцію завантаження файлів методом перетягування.
HTML
<header>
<h2 class="title">drop (HTML Event)</h2>
<p class="description">Визначає дію після скидання перетягуваного елемента в цільову зону.</p>
</header>
<main>
<div class="result">
<div id="fileDropZone" class="drop-zone">
Перетягніть файли сюди
</div>
<div id="previewArea" class="preview-area">
<!-- Прев'ю завантажених файлів -->
</div>
<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;
}
.preview-area {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.preview-area img {
width: 100px;
height: 100px;
object-fit: cover;
border: 1px solid #ddd;
}
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 previewArea = document.getElementById('previewArea');
const clearButton = document.getElementById('clearButton');
dropZone.addEventListener('dragover', function (event) {
event.preventDefault();
dropZone.classList.add('over');
console.log('Файли перетягуються над зоною завантаження.');
});
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) {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function (e) {
const img = document.createElement('img');
img.src = e.target.result;
previewArea.appendChild(img);
};
reader.readAsDataURL(file);
} else {
console.log('Недопустимий тип файлу: ', file.name);
}
}
console.log('Файли успішно скинуті.');
});
clearButton.addEventListener('click', function () {
previewArea.innerHTML = '';
console.log('Зона попереднього перегляду очищена.');
});
});
//# sourceURL=pen.jsУ цьому прикладі, коли користувач скидає текст у визначену зону, подія drop додає цей текст до текстового поля. Це може бути корисно для додавання контенту до форм або створення інтерактивних текстових редакторів.
HTML
<div id="dropZone">Демонстраційний елемент</div>
<input type="text" id="inputField" value="текст для прикладу" placeholder="Введи щось">JS
const dropZone = document.getElementById('dropZone');
const inputField = document.getElementById('inputField');
dropZone.addEventListener('dragover', function(event) {
event.preventDefault();
});
dropZone.addEventListener('drop', function(event) {
event.preventDefault();
const text = event.dataTransfer.getData('text');
inputField.value += text;
console.log(`Текст "${text}" додано до текстового поля.`);
});У цьому прикладі користувач може перетягувати файли в зону скидання, і подія drop обробляє ці файли, додаючи їх до списку. Це підходить для створення інтерактивних інтерфейсів для завантаження файлів, таких як панелі керування або форми завантаження.
HTML
<div id="dropArea">Демонстраційний елемент</div>
<ul id="fileList">
<li>перший пункт</li>
<li>другий пункт</li>
</ul>JS
const dropArea = document.getElementById('dropArea');
const fileList = document.getElementById('fileList');
dropArea.addEventListener('dragover', function(event) {
event.preventDefault();
dropArea.classList.add('highlight');
});
dropArea.addEventListener('dragleave', function(event) {
dropArea.classList.remove('highlight');
});
dropArea.addEventListener('drop', function(event) {
event.preventDefault();
dropArea.classList.remove('highlight');
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('Файли успішно скинуті.');
});Коментарі
Коментарів ще немає — будьте першим!