Настройка обработки указателей

Interact.js предоставляет мощный и гибкий механизм для работы с указателями — мышью, сенсорными экранами и стилусами. Обработка указателей в библиотеке строится вокруг событий взаимодействия и контекста перетаскивания, которые позволяют управлять элементами на странице с высокой точностью.

Инициализация взаимодействия

Для начала работы с элементом используется метод interact(), который возвращает объект Interactable, на котором можно настроить события:

interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,
    listeners: {
      move: dragMoveListener,
      end: dragEndListener
    }
  });

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

  • inertia — добавляет эффект инерции после отпуска элемента.
  • modifiers — позволяют ограничивать область перемещения, изменять размер и применять трансформации.
  • listeners — объект с функциями, обрабатывающими события start, move и end.

События указателей

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

  • pointerdown — срабатывает при нажатии на элемент.
  • pointermove — отслеживает движение указателя.
  • pointerup — фиксирует отпускание указателя.
  • tap и doubletap — для обработки кликов и двойных кликов на элементах.

Использование этих событий напрямую или через методы draggable(), resizable(), gesturable() позволяет создать интерактивное поведение для любого элемента.

Настройка делегирования

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

interact('#container')
  .draggable({
    listeners: { move: dragMoveListener },
    allowFrom: '.handle'
  });

Параметр allowFrom ограничивает начало взаимодействия только элементами с указанным селектором. Это предотвращает случайное срабатывание перетаскивания при кликах на другие части контейнера.

Ограничение области действия

Для управления областью перемещения используется modifiers:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: { top: 0, left: 0, bottom: 500, right: 800 },
        endOnly: true
      })
    ]
  });
  • restriction может быть элементом, объектом с координатами или CSS-селектором.
  • endOnly — если true, ограничение применится только в конце перемещения.

Настройка чувствительности и инерции

Для плавного взаимодействия можно тонко настроить параметры инерции и чувствительности:

interact('.draggable').draggable({
  inertia: {
    resistance: 20,
    minSpeed: 100,
    endSpeed: 10
  },
  listeners: { move: dragMoveListener }
});
  • resistance — сопротивление движения, чем больше значение, тем быстрее объект замедляется.
  • minSpeed и endSpeed — минимальная скорость старта и окончания инерции.

Поддержка мультиуказателей

Interact.js автоматически обрабатывает несколько указателей для элементов с gesturable() и draggable(). Это позволяет реализовать масштабирование и вращение одновременно с перемещением:

interact('.gesture')
  .gesturable({
    listeners: {
      move: function(event) {
        let scale = event.scale;
        let angle = event.delta.angle;
        event.target.style.transform =
          `scale(${scale}) rotate(${angle}deg)`;
      }
    }
  });
  • event.scale — масштаб жеста.
  • event.delta.angle — изменение угла между двумя пальцами.

Настройка задержек и минимального смещения

Для предотвращения случайного срабатывания перетаскивания можно использовать параметры delay и threshold:

interact('.draggable').draggable({
  listeners: { move: dragMoveListener },
  delay: 100,
  hold: 500,
  max: 2
});
  • delay — задержка перед запуском drag-события.
  • hold — время удержания до срабатывания.
  • max — максимальное количество указателей, которые могут одновременно влиять на объект.

Обработка координат и трансформаций

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

function dragMoveListener(event) {
  let target = event.target;
  let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
  let 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);
}
  • event.dx и event.dy — смещение указателя от предыдущего события.
  • Использование data-x и data-y обеспечивает сохранение позиции при повторных взаимодействиях.

Интеграция с другими событиями

Interact.js легко комбинируется с нативными событиями DOM:

interact('.draggable')
  .on('tap', function(event) {
    console.log('Элемент был нажат');
  })
  .on('doubletap', function(event) {
    console.log('Двойной клик зафиксирован');
  });

Это позволяет строить гибкую логику пользовательского интерфейса без конфликтов между событиями мыши и касаний.

Этот подход к настройке обработки указателей обеспечивает полный контроль над поведением элементов в приложениях, поддерживает сенсорные экраны, мышь и мультитач, и позволяет создавать интерактивные интерфейсы с высокой точностью и плавностью анимации.

Оглавление