События жестов

Interact.js предоставляет богатый набор событий, позволяющих отслеживать взаимодействие пользователя с элементами на странице. Основные категории событий жестов включают drag (перетаскивание), resize (изменение размеров) и gesture (масштабирование и вращение мультитач). Каждое событие сопровождается объектом event, содержащим детальную информацию о текущем состоянии взаимодействия.

События перетаскивания (drag)

Перетаскивание элементов является базовой функциональностью библиотеки. События, связанные с drag:

  • dragstart – инициируется при начале перетаскивания. Объект события содержит event.target (элемент) и event.clientX/Y (координаты мыши). Позволяет задать начальные условия, например, добавить CSS-класс для визуальной индикации перетаскивания.

  • dragmove – вызывается при каждом перемещении мыши или пальца. Основные свойства:

    • event.dx и event.dy – смещение относительно предыдущего кадра.
    • event.pageX и event.pageY – абсолютные координаты курсора.
    • event.target – текущий элемент, перемещаемый пользователем.

    Используется для динамического обновления позиции элемента через CSS или трансформации:

    interact('.draggable')
  .draggable({
    listeners: {
      move (event) {
        const x = (parseFloat(event.target.getAttribute('data-x')) || 0) + event.dx
        const y = (parseFloat(event.target.getAttribute('data-y')) || 0) + event.dy

        event.target.style.transform = `translate(${x}px, ${y}px)`
        event.target.setAttribute('data-x', x)
        event.target.setAttribute('data-y', y)
      }
    }
  })

  • dragend – срабатывает после завершения перетаскивания. Можно использовать для запуска анимаций возврата в исходное положение или для сохранения новых координат элемента.

События изменения размеров (resize)

Interact.js поддерживает динамическое изменение размеров элементов с использованием точек захвата (edges) или внутренних контролов:

  • resizestart – инициируется при начале изменения размеров. Позволяет определить начальные размеры элемента и подготовить визуальные индикаторы.

  • resizemove – основное событие изменения размеров. Объект события предоставляет:

    • event.deltaRect – изменение размеров в текущем кадре.
    • event.rect.width/height – новые размеры элемента.
    • event.edges – объект {top, left, bottom, right}, показывающий активные границы изменения.

    Пример изменения размеров через трансформацию:

    interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      move (event) {
        let { x, y } = event.target.dataset

        x = parseFloat(x) || 0
        y = parseFloat(y) || 0

        event.target.style.width  = `${event.rect.width}px`
        event.target.style.height = `${event.rect.height}px`

        x += event.deltaRect.left
        y += event.deltaRect.top

        event.target.style.transform = `translate(${x}px, ${y}px)`
        event.target.dataset.x = x
        event.target.dataset.y = y
      }
    }
  })

  • resizeend – срабатывает после завершения изменения размеров. Часто используется для фиксации новых размеров в базе данных или для запуска дополнительных эффектов.

События мультитач-жестов (gesture)

Interact.js поддерживает масштабирование и вращение с помощью нескольких касаний:

  • gesturestart – событие начала жеста. Содержит информацию о первоначальном расстоянии между пальцами и угле поворота.

  • gesturemove – срабатывает при изменении масштаба или поворота. Ключевые свойства:

    • event.scale – коэффициент масштабирования.
    • event.rotation – угол поворота в градусах.
    • event.clientX/Y – координаты центра жеста.

    Пример применения масштабирования и вращения:

    interact('.gesture')
  .gesturable({
    listeners: {
      move (event) {
        const scale = (parseFloat(event.target.dataset.scale) || 1) * event.scale
        const angle = (parseFloat(event.target.dataset.angle) || 0) + event.rotation

        event.target.style.transform =
          `scale(${scale}) rotate(${angle}deg)`

        event.target.dataset.scale = scale
        event.target.dataset.angle = angle
      }
    }
  })

  • gestureend – завершение жеста. Позволяет сохранять окончательные значения масштаба и поворота.

Универсальные особенности событий Interact.js

  • Прекращение всплытия событий: event.stopPropagation() работает аналогично стандартным событиям DOM.
  • Прекращение действия по умолчанию: event.preventDefault() позволяет отключить стандартное поведение браузера при жестах.
  • Доступ к исходному событию DOM: event.originalEvent содержит исходное событие мыши или касания для более детальной обработки.
  • Интеграция с CSS-трансформациями: Interact.js не изменяет непосредственно left и top элемента, что позволяет сохранять плавность анимаций через transform: translate(...).

События настраиваемых интерактивных зон

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

  • interact(selector).draggable({}) — ограничение области перетаскивания.
  • interact(selector).resizable({ edges: {...} }) — настройка точек изменения размеров.
  • Методы restrict, inertia и snap позволяют добавлять физические ограничения и эффекты движения.

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

Оглавление