Overlap и accept параметры

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

Параметр overlap

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

Значения overlap

  1. Числовое значение (0–1) Указывает минимальную долю перекрытия в процентах (от 0 до 1), где:

    • 0 — любой контакт с зоной считается попаданием.
    • 0.5 — элемент должен перекрывать зону хотя бы на 50%.
    • 1 — зона должна полностью покрывать элемент для успешного drop.
    interact('.dropzone').dropzone({
  overlap: 0.5, // 50% перекрытия
  ondrop: function (event) {
    console.log('Элемент успешно помещён в зону');
  }
});

  2. Строковые значения: 'pointer' Позволяет ориентироваться не на саму область элемента, а на позицию указателя мыши:

    • 'pointer' — событие drop срабатывает, если указатель мыши находится над зоной приёма.
    interact('.dropzone').dropzone({
  overlap: 'pointer'
});

Применение overlap

  • При разработке интерфейсов с мелкими элементами удобно использовать 'pointer', чтобы избежать ошибок из-за неточного размещения.
  • Для визуально крупных блоков лучше использовать числовое значение для точного контроля.

Параметр accept

Параметр accept задаёт правила, по которым зона приёма выбирает, какие элементы можно в неё помещать. Он помогает ограничивать взаимодействие только нужными элементами.

Типы значений accept

  1. CSS-селектор Позволяет принимать элементы, соответствующие определённому селектору:

    interact('.dropzone').dropzone({
  accept: '.draggable', // только элементы с классом draggable
  ondrop: function (event) {
    console.log('Элемент принят зоной');
  }
});

  2. Функция Более гибкий способ: функция получает объект события и возвращает true или false, определяя допустимость:

    interact('.dropzone').dropzone({
  accept: function (dragEvent) {
    return dragEvent.target.dataset.type === 'important';
  }
});
    • Функция получает объект dragEvent, содержащий данные о перетаскиваемом элементе.
    • Позволяет динамически менять правила в зависимости от состояния страницы или атрибутов элемента.

Совместное использование overlap и accept

Параметры overlap и accept работают вместе для точной настройки drag-and-drop:

  • accept фильтрует допустимые элементы.
  • overlap задаёт минимальное условие перекрытия или точку контроля, чтобы событие drop произошло.

Пример комплексной настройки:

interact('.dropzone').dropzone({
  accept: '.draggable',
  overlap: 0.7, // требуется перекрытие 70%
  ondrop: function (event) {
    console.log('Элемент полностью принят зоной');
  },
  ondragenter: function (event) {
    event.target.classList.add('highlight');
  },
  ondragleave: function (event) {
    event.target.classList.remove('highlight');
  }
});
  • ondragenter и ondragleave позволяют визуализировать состояние зоны приёма при наведении.
  • Высокое значение overlap предотвращает случайное срабатывание при слабом контакте.

Практические рекомендации

  1. Для интерфейсов с маленькими объектами и высокой точностью лучше использовать overlap: 'pointer'.
  2. Если важно, чтобы элемент полностью находился в зоне, устанавливать overlap в диапазоне 0.8–1.0.
  3. Для сложных условий выбора используйте функцию в accept вместо CSS-селектора.
  4. Комбинируйте overlap и визуальные эффекты (ondragenter, ondragleave) для улучшения UX.

Использование overlap и accept позволяет управлять точностью взаимодействия и фильтровать элементы, создавая надёжные drag-and-drop интерфейсы с предсказуемым поведением.

Оглавление