Взаимодействие между draggable и dropzone

Библиотека Interact.js предоставляет мощный инструмент для реализации перетаскивания элементов и определения зон, куда эти элементы могут быть помещены. Взаимодействие между draggable и dropzone строится на отслеживании событий перетаскивания и проверке попадания элемента в целевую область.

Инициализация draggable элементов

Для того чтобы элемент стал перетаскиваемым, используется метод interact(target).draggable(options). Ключевые параметры:

  • inertia – включает или отключает эффект инерции при завершении перетаскивания.

  • modifiers – массив ограничителей движения (например, ограничение перемещения внутри контейнера).

  • listeners – объект с обработчиками событий:

    • start – начало перетаскивания, полезно для инициализации состояния.
    • move – событие перемещения, обычно используется для изменения позиции элемента через CSS трансформации.
    • end – завершение перетаскивания, позволяет реализовать логику после отпускания элемента.

Пример базовой инициализации:

interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    listeners: {
      start(event) {
        console.log('Начало перетаскивания', event.target);
      },
      move(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);
      },
      end(event) {
        console.log('Завершение перетаскивания', event.target);
      }
    }
  });

Настройка dropzone

Элемент, который может принимать draggable объекты, настраивается через interact(target).dropzone(options). Основные опции:

  • accept – селектор или функция, определяющая, какие элементы могут быть сброшены на dropzone.
  • overlap – процент пересечения элемента с зоной, необходимый для срабатывания события.
  • ondropactivate – событие активации dropzone при начале перетаскивания.
  • ondropenter / ondragleave – срабатывают при входе и выходе draggable элемента из зоны.
  • ondrop – событие успешного сброса элемента в зону.
  • ondropdeactivate – окончание взаимодействия dropzone после завершения drag.

Пример конфигурации dropzone:

interact('.dropzone')
  .dropzone({
    accept: '.draggable',
    overlap: 0.5,
    ondropactivate(event) {
      event.target.classList.add('active-zone');
    },
    ondragenter(event) {
      event.target.classList.add('over-zone');
      event.relatedTarget.classList.add('can-drop');
    },
    ondragleave(event) {
      event.target.classList.remove('over-zone');
      event.relatedTarget.classList.remove('can-drop');
    },
    ondrop(event) {
      console.log('Элемент сброшен в зону:', event.target);
    },
    ondropdeactivate(event) {
      event.target.classList.remove('active-zone');
    }
  });

Связь draggable и dropzone

Основной механизм взаимодействия — отслеживание позиции draggable элемента относительно границ dropzone. Библиотека автоматически проверяет пересечение и вызывает соответствующие события. Ключевые моменты:

  • accept фильтрует элементы, которые могут быть сброшены в зону.

  • overlap позволяет гибко настраивать чувствительность:

    • overlap: 0 – достаточно коснуться границы.
    • overlap: 1 – требуется полное нахождение элемента внутри зоны.

  • Классы CSS, добавляемые в событиях dragenter/dragleave, позволяют визуализировать допустимые действия.

Управление динамическими элементами

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

interact(document).on('dragmove', '.draggable', function(event) {
  // Обработка перемещения динамического элемента
});

При этом dropzone можно также активировать для новых элементов, используя interact('.dropzone').dropzone() повторно или применяя селекторы, которые охватывают динамически созданные зоны.

Комбинирование нескольких dropzone

Можно определить несколько зон с разной логикой для одного draggable элемента:

interact('.dropzone-a').dropzone({ accept: '.draggable-a' });
interact('.dropzone-b').dropzone({ accept: '.draggable-b', overlap: 0.75 });

В этом случае Interact.js автоматически проверяет попадание каждого draggable элемента только в те зоны, которые соответствуют условию accept.

Тонкая настройка поведения

Modifiers и события drag позволяют реализовать сложную логику:

  • Ограничение по сетке: interact.modifiers.snap({ targets: [interact.snappers.grid({ x: 50, y: 50 })] }).
  • Ограничение в пределах контейнера: interact.modifiers.restrictRect({ restriction: 'parent' }).
  • Применение инерции для плавного завершения движения.

В сочетании с событиями dropzone это позволяет создавать интерактивные интерфейсы типа drag-and-drop редакторов, перетаскиваемых карточек, динамических списков и интерфейсов для прототипирования.

Практические советы по взаимодействию

  1. Всегда использовать data-атрибуты для хранения текущей позиции элемента. Это упрощает расчет трансформаций.
  2. Добавление/удаление CSS-классов в событиях dragenter/dragleave улучшает UX и визуально показывает допустимые зоны.
  3. Проверка accept через функцию дает больше гибкости, чем селектор. Например, можно учитывать атрибут data-type элемента.
  4. Использование overlap < 1 полезно, если элементы крупные и пересечение не должно быть полным.
  5. Комбинация snap и restrict позволяет сделать интерфейс аккуратным и контролируемым.

Событийная цепочка

При стандартном взаимодействии между draggable и dropzone события происходят в следующей последовательности:

  1. dragstart – начало перетаскивания элемента.
  2. dropactivate – активация всех потенциальных dropzone.
  3. dragmove – движение элемента.
  4. dragenter – элемент пересек границы dropzone.
  5. dragleave – элемент покинул dropzone.
  6. drop – успешный сброс элемента в dropzone.
  7. dropdeactivate – завершение взаимодействия для всех dropzone.
  8. dragend – окончание перетаскивания draggable элемента.

Эта последовательность позволяет точно контролировать и визуализировать каждое взаимодействие.

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

Использование событий drag и drop позволяет:

  • Изменять цвет или рамку dropzone при наведении элемента.
  • Показывать подсказки или индикаторы позиции.
  • Программно определять, куда был сброшен элемент, и выполнять соответствующие действия (перемещение данных, обновление состояния интерфейса).

Эта комбинация событий и опций делает Interact.js идеальным инструментом для сложных drag-and-drop интерфейсов с высокой интерактивностью.

Оглавление