События dropzone

Interact.js предоставляет мощный и гибкий механизм для реализации drag-and-drop интерфейсов. Одной из ключевых возможностей является создание зон, куда элементы можно перетаскивать — dropzone. Dropzone представляет собой область, реагирующую на события перетаскивания, что позволяет отслеживать попадание и отпускание draggable-элементов.

interact('.dropzone').dropzone({
  accept: '.draggable',
  overlap: 0.75
});
  • accept — CSS-селектор, определяющий, какие элементы могут быть приняты зоной.
  • overlap — процент пересечения элемента с зоной, после которого срабатывает событие drop.

Основные события dropzone

Interact.js предоставляет набор событий для контроля поведения dropzone:

  1. dragenter Срабатывает, когда draggable-элемент впервые входит в пределы dropzone.

    interact('.dropzone').on('dragenter', function (event) {
    event.target.classList.add('entered');
});
    • event.relatedTarget — перетаскиваемый элемент.
    • event.target — dropzone, в которую вошел элемент.

  2. dragleave Срабатывает, когда draggable-элемент покидает dropzone без отпускания.

    interact('.dropzone').on('dragleave', function (event) {
    event.target.classList.remove('entered');
});

    Полезно для визуального выделения зоны при наведении и снятия выделения при выходе.

  3. dropactivate Вызывается, когда начинается взаимодействие с drag-элементом, который может быть помещен в dropzone.

    interact('.dropzone').on('dropactivate', function (event) {
    event.target.classList.add('active');
});

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

  4. dropdeactivate Срабатывает после завершения drag-and-drop, вне зависимости от того, был ли drop успешным.

    interact('.dropzone').on('dropdeactivate', function (event) {
    event.target.classList.remove('active');
    event.target.classList.remove('entered');
});

    Это событие важно для очистки состояния зоны после завершения операции.

  5. dropmove Срабатывает при движении drag-элемента внутри зоны dropzone. Позволяет отслеживать позицию элемента внутри зоны и создавать динамическое поведение.

    interact('.dropzone').on('dropmove', function (event) {
    const draggable = event.relatedTarget;
    const dropzone = event.target;
    // Можно динамически менять стили или отображать подсказки
});

  6. drop Основное событие для фиксации успешного размещения draggable-элемента в dropzone.

    interact('.dropzone').on('drop', function (event) {
    const draggable = event.relatedTarget;
    const dropzone = event.target;
    dropzone.appendChild(draggable);
    draggable.style.position = 'relative';
    draggable.style.left = '0px';
    draggable.style.top = '0px';
});

    При срабатывании drop важно корректно обновлять DOM и стили элемента, чтобы он оставался в зоне.

Конфигурация dropzone

Dropzone можно настраивать через параметры, передаваемые в .dropzone():

  • accept — CSS-селектор или функция, определяющая, какие элементы разрешено принимать.
  • overlap — число от 0 до 1, определяющее, какая часть draggable должна пересекаться с зоной для срабатывания drop.
  • checker — кастомная функция для проверки допустимости drop. Позволяет реализовать сложные правила взаимодействия.
interact('.dropzone').dropzone({
  accept: '.draggable',
  overlap: 0.5,
  checker: function (dragEvent, event, dropped, dropzone, dropElement, draggableElement) {
      // Возвращаем true, если drop разрешён
      return draggableElement.dataset.type === dropzone.dataset.acceptType;
  }
});

Визуальные эффекты и UX

Для улучшения UX важно использовать события dropzone для визуальной обратной связи:

  • Подсветка зоны при dragenter и снятие при dragleave.
  • Изменение курсора или отображение подсказки при dropmove.
  • Анимация перемещения элемента при drop для плавного перехода.
.dropzone {
  border: 2px dashed #ccc;
  transition: background-color 0.2s;
}
.dropzone.entered {
  background-color: #e0f7fa;
}
.dropzone.active {
  border-color: #00acc1;
}

Интеграция с draggable

Dropzone работает в связке с draggable-элементами:

interact('.draggable').draggable({
  inertia: true,
  modifiers: [
    interact.modifiers.restrictRect({
      restriction: 'parent',
      endOnly: true
    })
  ],
  autoScroll: true
});
  • inertia — добавляет плавное движение при отпускании мыши.
  • modifiers.restrictRect — ограничивает движение элементом-родителем.
  • autoScroll — обеспечивает автоматическую прокрутку при перемещении элемента к границе контейнера.

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

Практические советы

  • Всегда использовать dropdeactivate для очистки состояния после drag-and-drop.
  • Комбинировать overlap и кастомный checker, чтобы управлять сложными правилами попадания.
  • Для нескольких dropzone лучше использовать CSS-классы для визуального различия и выделения активной зоны.
  • Использовать dropmove для отображения динамических подсказок или проверки позиции перед drop.

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

Оглавление