JS об'єкт DragEvent

Загальний опис

DragEvent є набором подій, які JavaScript забезпечує для обробки дій перетягування елементів на сторінці. Вони дозволяють реалізувати інтерактивне переміщення елементів, взаємодію між ними та з іншими частинами сторінки. Основні події, що входять у набір "DragEvent", включають dragstart, drag, dragenter, dragover, dragleave, drop та dragend. Кожна з них призначена для відстеження конкретних моментів у процесі перетягування.

Подія dragstart виникає, коли користувач починає перетягувати елемент, і є стартовою точкою в процесі перетягування. У цьому випадку зазвичай додають дані до об’єкта DataTransfer, щоб визначити, які саме дані будуть перенесені, або змінюють стиль елемента.

element.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', event.target.id);
});

Події drag і dragover викликаються під час самого перетягування. dragover є важливою подією, оскільки за замовчуванням елементи не допускають подію drop, і для активації можливості "скидання" необхідно викликати event.preventDefault() у dragover.

element.addEventListener('dragover', (event) => {
  event.preventDefault(); // дозволяє скидання
});

Події dragenter та dragleave допомагають відслідковувати момент, коли елемент входить в область іншого елемента або покидає її. Їх можна використовувати для зміни стилю елемента, над яким проходить перетягування, що додає інтерактивності.

Остання фаза перетягування — drop, де відбувається "скидання" елемента, тобто його розміщення на цільовому місці. Використовуючи drop, можна отримати дані, які були встановлені у dragstart, і провести подальшу обробку.

element.addEventListener('drop', (event) => {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  console.log(`Отримані дані: ${data}`);
});

Заключна подія, dragend, запускається після завершення перетягування, незалежно від того, де відбулося скидання. Це зручно для скидання стилів або стану елементів.

правити

Порада

Щоб зберегти стильний вигляд під час перетягування, можна використовувати dragenter та dragleave для додавання/зняття спеціального класу стилю на елементі, що служить ціллю. Це забезпечить візуальне виділення елемента, коли над ним проходить перетягування.

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

Порада

Якщо ви перетягуєте текст між полями, замість text/plain, встановіть text/html у DataTransfer, щоб зберігати стилі. Це особливо корисно для зберігання відформатованого тексту.

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

Порада

Щоб скинути стилі або візуальні ефекти після завершення перетягування, використовуйте dragend. Наприклад, змінюючи стилі для скидання стану після перетягування, ви зможете надати користувачу більш зрозумілий і точний інтерфейс.

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

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

Синтаксис

element.addEventListener('dragstart', (event) => {
  // код, що виконується під час початку перетягування
});

element.addEventListener('dragover', (event) => {
  // код, що виконується під час перетягування над цільовим елементом
});

element.addEventListener('drop', (event) => {
  // код, що виконується під час завершення перетягування
});

Переглядачі

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

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

Переглядач
	46	3.5	14	12	12	9

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

Переглядач
	46	46	4	14

Приклади

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

<div class="item">перший елемент item</div>
<div class="item">другий елемент item</div>

let draggedItem = null;

document.querySelectorAll('.item').forEach((item) => {
  item.addEventListener('dragstart', (event) => {
    draggedItem = event.target;
    event.target.style.opacity = 0.5;
  });

  item.addEventListener('dragend', (event) => {
    event.target.style.opacity = '';
    draggedItem = null;
  });

  item.addEventListener('dragover', (event) => {
    event.preventDefault();
  });

  item.addEventListener('drop', (event) => {
    event.preventDefault();
    if (draggedItem && draggedItem !== event.target) {
      event.target.parentNode.insertBefore(draggedItem, event.target.nextSibling);
    }
  });
});

<div class="target">перший елемент target</div>
<div class="target">другий елемент target</div>

let draggedData = null;

document.querySelectorAll('.source .item').forEach((item) => {
  item.addEventListener('dragstart', (event) => {
    draggedData = event.target.innerText;
    event.target.style.backgroundColor = 'gray';
  });

  item.addEventListener('dragend', (event) => {
    event.target.style.backgroundColor = '';
  });
});

document.querySelectorAll('.target').forEach((target) => {
  target.addEventListener('dragover', (event) => {
    event.preventDefault();
  });

  target.addEventListener('drop', (event) => {
    event.preventDefault();
    if (draggedData) {
      event.target.innerText += draggedData;
      draggedData = null;
    }
  });
});