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