Создание зон сброса

Interact.js предоставляет гибкий инструмент для реализации перетаскивания элементов (drag) и управления зонами сброса (dropzone). Зона сброса — это элемент интерфейса, который может принимать перетаскиваемые объекты. Основные возможности включают определение активных зон, проверку условий для сброса и обработку событий.

interact('.dropzone').dropzone({
  // Активирует подсветку зоны при наведении
  ondragenter: function (event) {
    event.target.classList.add('drop-target');
  },
  // Убирает подсветку при уходе элемента
  ondragleave: function (event) {
    event.target.classList.remove('drop-target');
  },
  // Действие при успешном сбросе
  ondrop: function (event) {
    console.log('Элемент сброшен в зону:', event.target);
  }
});

Ключевые параметры конфигурации dropzone:

  • accept — селектор или функция для фильтрации допустимых элементов. Пример:

    accept: '.draggable'

  • overlap — определяет, как элемент должен попадать в зону:

    • "pointer" — достаточно, чтобы указатель мыши пересек зону;
    • "center" — центр перетаскиваемого элемента должен находиться в зоне;
    • число от 0 до 1 — процент пересечения элемента и зоны.
    overlap: 0.5

  • ondropactivate / ondropdeactivate — события при активации и деактивации зоны, полезны для изменения стиля или состояния интерфейса.

Связь с перетаскиваемыми элементами

Для корректной работы зоны сброса необходимо настроить draggable-элементы:

interact('.draggable').draggable({
  inertia: true,
  modifiers: [
    interact.modifiers.restrictRect({
      restriction: 'parent',
      endOnly: true
    })
  ],
  autoScroll: true,
  listeners: {
    move: dragMoveListener
  }
});

function dragMoveListener(event) {
  const target = event.target;
  const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
  const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

  target.style.transform = `translate(${x}px, ${y}px)`;
  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);
}

Эта конфигурация обеспечивает плавное перемещение и совместимость с зонами сброса.

Обработка событий зоны сброса

Interact.js позволяет отслеживать события на разных этапах взаимодействия:

  • ondragenter — элемент входит в зону. Используется для подсветки или подготовки зоны.
  • ondragleave — элемент покидает зону. Часто возвращает стиль к исходному состоянию.
  • ondropactivate / ondropdeactivate — глобальная активация зоны при начале или завершении drag-сессии.
  • ondrop — успешный сброс. Здесь можно инициировать логику обработки данных или DOM-изменений.

Пример с использованием всех событий:

interact('.dropzone').dropzone({
  accept: '.draggable',
  overlap: 0.75,
  ondropactivate: event => event.target.classList.add('active-zone'),
  ondragenter: event => event.target.classList.add('hovered-zone'),
  ondragleave: event => event.target.classList.remove('hovered-zone'),
  ondrop: event => console.log('Сброшено:', event.relatedTarget),
  ondropdeactivate: event => event.target.classList.remove('active-zone')
});

Сложные сценарии: несколько зон и динамическая активация

В интерфейсах с множеством зон можно динамически включать или отключать dropzone:

function toggleDropzone(zone, enable) {
  if (enable) {
    interact(zone).dropzone({
      accept: '.draggable',
      overlap: 0.5,
      ondrop: event => console.log('Сброшено в', zone)
    });
  } else {
    interact(zone).dropzone(false);
  }
}

Такой подход полезен, когда зоны зависят от состояния приложения или пользовательских действий.

Фильтрация и приоритет зон

Когда несколько зон перекрываются, Interact.js позволяет использовать accept и checkable для контроля, куда элемент может быть сброшен. Можно использовать функцию:

accept: function (dragElement) {
  return dragElement.dataset.type === 'allowed';
}

Это обеспечивает строгий контроль за тем, какие элементы допустимы для конкретной зоны.

Визуальная обратная связь

Для лучшего UX стоит комбинировать CSS-классы с событиями:

.dropzone.active-zone {
  border: 2px dashed #4CAF50;
  background-color: rgba(76, 175, 80, 0.1);
}

.dropzone.hovered-zone {
  border-color: #FF9800;
  background-color: rgba(255, 152, 0, 0.2);
}

Использование визуальных индикаторов помогает пользователю понимать, куда можно сбросить элемент, и делает интерфейс интуитивным.

Перенос данных при сбросе

Можно передавать данные через атрибуты или свойства:

ondrop: function(event) {
  const data = event.relatedTarget.dataset.info;
  event.target.textContent = `Данные: ${data}`;
}

Этот метод часто используется в интерфейсах типа “перетащи и отпусти”, где необходимо обновить состояние приложения после сброса элемента.

Ограничения и совместимость

Interact.js поддерживает современные браузеры с стандартными событиями pointer, touch и mouse. При необходимости можно добавить fallback для старых версий, используя pointerEvents и полифиллы. Важно учитывать производительность при множественных зонах и тяжелых DOM-элементах — оптимизация стилей и событий критична для плавного UX.

Оглавление