Области срабатывания

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

Определение dropzone

Dropzone — это элемент, который может принимать перетаскиваемые объекты. Основные свойства, определяющие поведение dropzone:

  • accept — CSS-селектор или функция, определяющая, какие элементы могут быть помещены в dropzone.
  • overlap — величина перекрытия, необходимая для срабатывания события drop. Может быть числом от 0 до 1 или предустановленными значениями pointer, center.
  • ondropactivate, ondragenter, ondragleave, ondrop — события, управляющие поведением при взаимодействии перетаскиваемого объекта с dropzone.

Пример базовой настройки dropzone:

interact('.dropzone').dropzone({
  accept: '.draggable',
  overlap: 0.5,

  ondropactivate: function (event) {
    event.target.classList.add('active-dropzone');
  },
  ondragenter: function (event) {
    const draggableElement = event.relatedTarget;
    const dropzoneElement = event.target;

    dropzoneElement.classList.add('hovered');
    draggableElement.classList.add('can-drop');
  },
  ondragleave: function (event) {
    event.target.classList.remove('hovered');
    event.relatedTarget.classList.remove('can-drop');
  },
  ondrop: function (event) {
    event.target.appendChild(event.relatedTarget);
  }
});

В этом примере .dropzone принимает только элементы с классом .draggable, а событие ondragenter срабатывает при перекрытии на 50%.

Настройка области перекрытия

Свойство overlap определяет, насколько перетаскиваемый элемент должен перекрывать dropzone для срабатывания события:

  • 0.0–1.0 — процентное перекрытие: 0.5 означает, что половина объекта должна находиться внутри dropzone.
  • pointer — срабатывание при наведении указателя мыши.
  • center — срабатывание, когда центр перетаскиваемого элемента попадает внутрь dropzone.
interact('.dropzone').dropzone({
  overlap: 'pointer'
});

Использование 'pointer' удобно для случаев, когда визуально требуется более точное срабатывание при наведении мыши.

Фильтрация элементов через accept

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

  • CSS-селекторы (.draggable, #item1)
  • Функцию, возвращающую true или false:
interact('.dropzone').dropzone({
  accept: function (element) {
    return element.hasAttribute('data-draggable');
  }
});

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

События dropzone

Interact.js выделяет несколько ключевых событий, связанных с dropzone:

  1. ondropactivate — срабатывает при активации dropzone (обычно при начале drag).
  2. ondragenter — элемент перетаскивается в область dropzone.
  3. ondragleave — элемент покидает область dropzone.
  4. ondrop — элемент отпущен и попадает в dropzone.
  5. ondropdeactivate — деактивация dropzone после завершения drag.

Каждое событие получает объект event с двумя ключевыми свойствами:

  • event.target — DOM-элемент dropzone.
  • event.relatedTarget — DOM-элемент перетаскиваемого объекта.

Комплексное управление поведением

Для сложных интерфейсов dropzone можно комбинировать несколько правил:

interact('.dropzone').dropzone({
  accept: '.draggable',
  overlap: 0.6,
  ondragenter: function (event) {
    event.target.style.background = '#e0f7fa';
  },
  ondragleave: function (event) {
    event.target.style.background = '';
  },
  ondrop: function (event) {
    const dragged = event.relatedTarget;
    event.target.appendChild(dragged);
    dragged.style.transform = '';
  }
});

Здесь используется визуальная подсветка при наведении и возврат стилей после drop. При этом элемент корректно вставляется в dropzone, а transform, применённый при drag, сбрасывается.

Вложенные dropzone и приоритеты

Interact.js поддерживает вложенные dropzone. Важно правильно настроить:

  • зоны перекрытия — более узкая зона получает приоритет.
  • accept — вложенные dropzone могут фильтровать разные типы draggable.
interact('.parent-dropzone').dropzone({ accept: '.typeA', overlap: 0.5 });
interact('.child-dropzone').dropzone({ accept: '.typeB', overlap: 0.7 });

При этом элемент типа .typeB, попавший в child-dropzone, не будет захвачен parent-dropzone, даже если они пересекаются.

Использование pointerEvents для оптимизации

Чтобы избежать конфликтов с вложенными элементами, полезно управлять CSS-свойством pointer-events. Dropzone может быть невидимой для событий мыши, пока не активен drag:

.dropzone {
  pointer-events: none;
}

.dropzone.active-dropzone {
  pointer-events: auto;
}

Настройка с помощью динамических селекторов

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

document.addEventListener('click', () => {
  interact('.dynamic-dropzone').dropzone({
    accept: '.new-draggable',
    overlap: 0.5
  });
});

Такой подход полезен для интерфейсов, где dropzone создаются и уничтожаются в зависимости от состояния приложения.

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

  • Использовать pointer для интерфейсов с небольшими элементами.
  • Вложенные dropzone требуют внимательной настройки overlap и accept.
  • События ondragenter и ondragleave — удобный способ реализовать визуальную подсветку.
  • Для динамических интерфейсов можно обновлять accept и overlap на лету через interact(target).dropzone(options).

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

Оглавление