Події перетягування · fullstack.org.ua

Просунутий19 хв· Fullstack Team

Події перетягування

Реалізуєте перетягування елементів і обмін даними за допомогою подій Drag and Drop API.

Що таке Drag and Drop API

Drag and Drop API дає змогу реагувати на перетягування елементів мишею або трекпадом:

перетягувати елементи всередині сторінки;
обмінюватися даними між джерелом і цільовою областю;
приймати файли, перетягнуті з файлового менеджера;
визначати дозволену операцію: переміщення, копіювання або створення посилання.

API базується на подіях і об’єкті DataTransfer. Джерело перетягування записує дані в dragstart, а цільова область читає їх у drop.

Життєвий цикл перетягування

Для HTML-елемента, який можна перетягувати, потрібно встановити атрибут:

html

<div draggable="true">Перетягніть мене</div>

javascript

dropZone.addEventListener('drop', (event) => {
  event.preventDefault();

  const taskId = event.dataTransfer.getData('text/plain');
  const rawTask = event.dataTransfer.getData('application/x-task+json');

  console.log(taskId, rawTask);
});

html

<!doctype html>
<html lang="uk">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Drag and Drop дошка</title>

  <style>
    :root {
      font-family: system-ui, sans-serif;
      color: #172033;
      background: #f3f5f9;
    }

    body {
      max-width: 1100px;
      margin: 0 auto;
      padding: 32px 16px;
    }

    h1 {
      margin-top: 0;
    }

    .board {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .column {
      min-height: 260px;
      padding: 16px;
      border: 2px dashed #b8c1d1;
      border-radius: 12px;
      background: #ffffff;
      transition: border-color 150ms, background 150ms;
    }

    .column.is-over {
      border-color: #3867d6;
      background: #edf3ff;
    }

    .column h2 {
      margin: 0 0 12px;
      font-size: 1.1rem;
    }

    .task-list {
      display: grid;
      gap: 10px;
      min-height: 180px;
    }

    .task {
      display: block;
      width: 100%;
      padding: 12px;
      border: 1px solid #d8deea;
      border-radius: 8px;
      background: #fff;
      color: inherit;
      text-align: left;
      cursor: grab;
      box-shadow: 0 2px 5px rgb(23 32 51 / 8%);
    }

    .task:hover,
    .task:focus-visible {
      border-color: #3867d6;
      outline: 3px solid rgb(56 103 214 / 25%);
      outline-offset: 2px;
    }

    .task:active {
      cursor: grabbing;
    }

    .task.is-dragging {
      opacity: 0.45;
    }

    .task-title {
      display: block;
      font-weight: 700;
    }

    .task-description {
      display: block;
      margin-top: 4px;
      color: #5e687b;
      font-size: 0.9rem;
    }

    .hint {
      margin-top: 20px;
      color: #5e687b;
    }

    .sr-status {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    @media (max-width: 700px) {
      .board {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <h1>Дошка завдань</h1>

  <div class="board">
    <section
      class="column"
      data-status="backlog"
      aria-labelledby="backlog-title"
    >
      <h2 id="backlog-title">Заплановано</h2>
      <div class="task-list" role="list">
        <div
          class="task"
          role="button"
          tabindex="0"
          draggable="true"
          data-id="task-1"
          data-title="Дослідити API"
          aria-pressed="false"
        >
          <span class="task-title">Дослідити API</span>
          <span class="task-description">Порівняти доступні варіанти</span>
        </div>

        <div
          class="task"
          role="button"
          tabindex="0"
          draggable="true"
          data-id="task-2"
          data-title="Підготувати макет"
          aria-pressed="false"
        >
          <span class="task-title">Підготувати макет</span>
          <span class="task-description">Створити структуру сторінки</span>
        </div>
      </div>
    </section>

    <section
      class="column"
      data-status="progress"
      aria-labelledby="progress-title"
    >
      <h2 id="progress-title">У роботі</h2>
      <div class="task-list" role="list">
        <div
          class="task"
          role="button"
          tabindex="0"
          draggable="true"
          data-id="task-3"
          data-title="Написати тести"
          aria-pressed="false"
        >
          <span class="task-title">Написати тести</span>
          <span class="task-description">Перевірити основні сценарії</span>
        </div>
      </div>
    </section>

    <section
      class="column"
      data-status="done"
      aria-labelledby="done-title"
    >
      <h2 id="done-title">Готово</h2>
      <div class="task-list" role="list"></div>
    </section>
  </div>

  <p class="hint">
    Перетягніть картку мишею або виберіть її клавішею Space і переміщуйте
    клавішами ← та →.
  </p>

  <p class="sr-status" aria-live="polite"></p>

  <script>
    const columns = [...document.querySelectorAll('.column')];
    const tasks = [...document.querySelectorAll('.task')];
    const statusOutput = document.querySelector('.sr-status');

    const taskDataType = 'application/x-task+json';

    // Лічильник потрібен, бо dragenter/dragleave спрацьовують і для дочірніх елементів.
    const dragDepth = new Map(columns.map((column) => [column, 0]));

    function resetColumnState() {
      for (const column of columns) {
        dragDepth.set(column, 0);
        column.classList.remove('is-over');
      }
    }

    function getColumnName(column) {
      return column.querySelector('h2').textContent.trim();
    }

    function moveTask(task, targetColumn) {
      const taskList = targetColumn.querySelector('.task-list');
      taskList.append(task);

      const taskTitle = task.dataset.title;
      const columnName = getColumnName(targetColumn);

      statusOutput.textContent =
        `Завдання «${taskTitle}» переміщено до колонки «${columnName}».`;
    }

    for (const task of tasks) {
      task.addEventListener('dragstart', (event) => {
        const payload = {
          id: task.dataset.id,
          title: task.dataset.title,
          sourceStatus: task.closest('.column').dataset.status
        };

        // Передаємо структуровані дані для нашого застосунку.
        event.dataTransfer.setData(taskDataType, JSON.stringify(payload));

        // Текстовий формат є запасним варіантом для інших споживачів даних.
        event.dataTransfer.setData('text/plain', payload.id);

        event.dataTransfer.effectAllowed = 'move';
        task.classList.add('is-dragging');
      });

      task.addEventListener('dragend', () => {
        task.classList.remove('is-dragging');
        resetColumnState();
      });

      // Клавіатурна альтернатива для пристроїв, де native DnD недоступний.
      task.addEventListener('keydown', (event) => {
        if (event.key === ' ') {
          event.preventDefault();

          const isGrabbed = task.getAttribute('aria-pressed') === 'true';
          task.setAttribute('aria-pressed', String(!isGrabbed));

          statusOutput.textContent = isGrabbed
            ? `Завдання «${task.dataset.title}» відпущено.`
            : `Завдання «${task.dataset.title}» вибрано. Використовуйте ← або →.`;
        }

        if (
          (event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
          task.getAttribute('aria-pressed') === 'true'
        ) {
          event.preventDefault();

          const currentColumn = task.closest('.column');
          const currentIndex = columns.indexOf(currentColumn);
          const direction = event.key === 'ArrowRight' ? 1 : -1;
          const nextIndex = currentIndex + direction;

          if (columns[nextIndex]) {
            moveTask(task, columns[nextIndex]);
            task.focus();
          }
        }
      });
    }

    for (const column of columns) {
      column.addEventListener('dragenter', (event) => {
        event.preventDefault();

        const depth = dragDepth.get(column) + 1;
        dragDepth.set(column, depth);
        column.classList.add('is-over');
      });

      column.addEventListener('dragover', (event) => {
        // Без preventDefault браузер не дозволить виконати drop.
        event.preventDefault();

        // Джерело дозволило переміщення, тому показуємо відповідний ефект.
        event.dataTransfer.dropEffect = 'move';
      });

      column.addEventListener('dragleave', () => {
        const depth = Math.max(0, dragDepth.get(column) - 1);
        dragDepth.set(column, depth);

        if (depth === 0) {
          column.classList.remove('is-over');
        }
      });

      column.addEventListener('drop', (event) => {
        event.preventDefault();

        const rawPayload = event.dataTransfer.getData(taskDataType);
        const fallbackId = event.dataTransfer.getData('text/plain');

        let payload = null;

        try {
          payload = rawPayload ? JSON.parse(rawPayload) : null;
        } catch {
          // Некоректний JSON не повинен ламати обробку drop.
          payload = null;
        }

        const taskId = payload?.id || fallbackId;

        // Не довіряємо зовнішнім даним і шукаємо реальний елемент у DOM.
        const task = [...document.querySelectorAll('.task')]
          .find((item) => item.dataset.id === taskId);

        if (!task) {
          resetColumnState();
          return;
        }

        moveTask(task, column);
        task.setAttribute('aria-pressed', 'false');
        resetColumnState();
      });
    }
  </script>
</body>
</html>

javascript

const fileZone = document.querySelector('#file-zone');

fileZone.addEventListener('dragover', (event) => {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
});

fileZone.addEventListener('drop', (event) => {
  event.preventDefault();

  const files = [...event.dataTransfer.files];

  for (const file of files) {
    if (!file.type.startsWith('image/')) {
      continue;
    }

    console.log(file.name, file.size, file.type);
  }
});

javascript

const types = event.dataTransfer.types;

if (types.includes('application/x-task+json')) {
  // Дані з нашого застосунку.
} else if (event.dataTransfer.files.length > 0) {
  // Перетягнуті файли.
} else {
  // Інший або непідтримуваний формат.
}

Події перетягування

Що таке Drag and Drop API

Життєвий цикл перетягування

Об’єкт `DataTransfer`

Запис даних

Читання даних

`effectAllowed` і `dropEffect`

Повний приклад: дошка завдань

Обробка вкладених елементів

Перетягування файлів

Внутрішнє та зовнішнє перетягування

Клавіатура та доступність

Особливості сенсорних пристроїв

Типові помилки

Відсутній `preventDefault()` у `dragover`

Читання даних у неправильній події

Спроба передати об’єкт напряму

Зміна DOM у `dragover`

Застосування `dragleave` без урахування дочірніх елементів

Довіра до переданого ідентифікатора

Відсутність обробника `dragend`

Підсумок

Події перетягування

Що таке Drag and Drop API

Життєвий цикл перетягування

Об’єкт DataTransfer

Запис даних

Читання даних

effectAllowed і dropEffect

Повний приклад: дошка завдань

Обробка вкладених елементів

Перетягування файлів

Внутрішнє та зовнішнє перетягування

Клавіатура та доступність

Особливості сенсорних пристроїв

Типові помилки

Відсутній preventDefault() у dragover

Читання даних у неправильній події

Спроба передати об’єкт напряму

Зміна DOM у dragover

Застосування dragleave без урахування дочірніх елементів

Довіра до переданого ідентифікатора

Відсутність обробника dragend

Підсумок

Об’єкт `DataTransfer`

`effectAllowed` і `dropEffect`

Відсутній `preventDefault()` у `dragover`

Зміна DOM у `dragover`

Застосування `dragleave` без урахування дочірніх елементів

Відсутність обробника `dragend`