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 є ключовою для реалізації функціоналу перетягування та скидання, оскільки вона дозволяє розробникам повністю контролювати, що станеться після завершення операції перетягування. Вона забезпечує необхідні засоби для передачі даних між різними частинами інтерфейсу або навіть між різними веб-додатками.

правити

Порада

Завжди очищайте стилі і клас цільових зон після події drop. Це допоможе підтримувати акуратний і зрозумілий інтерфейс користувача.

автор: Bond правити

Порада

Використовуйте подію drop для додавання нових елементів до DOM або оновлення існуючих. Це може бути корисно для створення інтерактивних списків або галерей.

автор: Bond правити

Порада

Перевіряйте типи даних під час обробки події drop. Це дозволить уникнути непередбачених поведінок або помилок, особливо коли підтримуються різні формати даних.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('drop', function(event) {
  // Ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	9	3.1	12	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	9	2

Приклади

+ запропонувати свій приклад у пісочниці

<div id="dropZone">Демонстраційний елемент</div>
<input type="text" id="inputField" value="текст для прикладу" placeholder="Введи щось">

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}" додано до текстового поля.`);
});

<div id="dropArea">Демонстраційний елемент</div>
<ul id="fileList">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

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('Файли успішно скинуті.');
});