Глобальные методы

Библиотека Interact.js предоставляет набор глобальных методов для управления взаимодействием с элементами DOM, настройки поведения перетаскивания, масштабирования, жестов и их интеграции с приложением. Глобальные методы позволяют работать с библиотекой на уровне всей страницы, независимо от конкретного элемента.

interact(target)

Метод interact является основным глобальным интерфейсом библиотеки. Он принимает аргумент target, который может быть:

  • CSS-селектором ('.draggable')
  • DOM-элементом (document.getElementById('box'))
  • NodeList или массив DOM-элементов

Пример использования:

interact('.draggable')
  .draggable({
    listeners: {
      start(event) {
        console.log('Начало перетаскивания', event.target);
      },
      move(event) {
        event.target.style.transform = `translate(${event.dx}px, ${event.dy}px)`;
      },
      end(event) {
        console.log('Окончание перетаскивания');
      }
    }
  });

Ключевые моменты:

  • Метод возвращает объект Interactable, на котором настраиваются draggable, resizable, gesturable события.
  • Объект можно конфигурировать глобально через .options или .styleCursor.

interact.maxInteractions()

Метод ограничивает количество одновременных взаимодействий пользователя с элементами страницы.

interact.maxInteractions(2);

Применение:

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

interact.pointerMoveTolerance()

Метод задает порог движения указателя (в пикселях), при котором начинается событие drag.

interact.pointerMoveTolerance(5);
  • Если указатель двигается меньше указанного значения, событие dragmove не инициируется.
  • Полезно для предотвращения случайного начала перетаскивания при клике.

interact.stop()

Останавливает все активные взаимодействия на странице:

interact.stop();
  • Немедленно завершает все текущие drag, resize и gestural действия.
  • Может использоваться при изменении состояния интерфейса или закрытии модальных окон.

interact.on() / interact.off()

Глобальная подписка на события, происходящие в библиотеке. Позволяет слушать события на уровне всей страницы.

interact.on('dragstart', event => {
  console.log('Началось перетаскивание элемента', event.target);
});

interact.off('dragstart');
  • interact.on(event, listener) — добавляет глобальный слушатель.
  • interact.off(event, listener) — удаляет слушатель.
  • Полезно для логирования или глобального контроля состояния drag/resize.

interact.createSnapGrid()

Метод позволяет создавать глобальную сетку привязки для элементов:

interact('.draggable').draggable({
  modifiers: [
    interact.createSnapGrid({ x: 50, y: 50 })
  ]
});
  • Создает сетку, к которой будут «прилипать» элементы при перетаскивании.
  • Параметры x и y задают шаг сетки по горизонтали и вертикали.
  • Можно комбинировать с другими модификаторами, такими как restrictRect или restrictEdges.

interact.supported

Глобальное свойство, показывающее, поддерживается ли библиотека в текущем браузере:

if (interact.supported) {
  console.log('Interact.js поддерживается этим браузером');
} else {
  console.warn('Не поддерживается');
}
  • Возвращает true или false.
  • Используется для условной загрузки функционала drag/resize.

interact.isSet(target)

Проверяет, зарегистрирован ли элемент или селектор в качестве interactable:

if (!interact.isSet('#box')) {
  interact('#box').draggable(true);
}
  • Позволяет избежать повторной инициализации элементов.
  • Работает как быстрый контроль состояния привязки элементов.

Глобальные методы модификаторов

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

  • interact.modifiers.snap()
  • interact.modifiers.restrict()
  • interact.modifiers.restrictEdges()
  • interact.modifiers.restrictRect()

Пример глобального snap:

interact.modifiers.snap({
  targets: [interact.createSnapGrid({ x: 20, y: 20 })],
  range: Infinity,
  relativePoints: [{ x: 0.5, y: 0.5 }]
});
  • Все новые interactable-элементы автоматически наследуют эти глобальные модификаторы.
  • Позволяет централизованно управлять поведением элементов на странице.

interact.autoScroll()

Метод включает автоматическую прокрутку родительских контейнеров при перетаскивании элементов к краям:

interact.autoScroll(true);
  • Можно указать параметры скорости, области срабатывания и контейнеры.
  • Удобно для больших страниц с прокручиваемыми списками или канбан-досками.

Особенности работы с глобальными методами

  1. Согласованность: Глобальные методы влияют на все interactable-элементы, созданные после их вызова.
  2. Инициализация: Для правильного действия глобальных модификаторов и сеток необходимо вызывать их до регистрации элементов.
  3. Производительность: Ограничение максимального количества взаимодействий (maxInteractions) улучшает отзывчивость интерфейса при сложных страницах с множеством drag/resize элементов.
  4. Контроль ошибок: Использование interact.supported предотвращает вызовы методов в неподдерживаемых браузерах, что делает код более стабильным.

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

Оглавление