Эмуляция событий

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

Подключение и настройка

Для начала необходимо подключить библиотеку:

<script src="https://cdn.jsdelivr.net/npm/@interactjs/interactjs/dist/interact.min.js"></script>

После подключения можно использовать interact() для выбора элементов и задания обработчиков событий:

interact('.draggable')
  .draggable({
    listeners: {
      start (event) {
        console.log('Начало перетаскивания', event);
      },
      move (event) {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const 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);
      },
      end (event) {
        console.log('Конец перетаскивания', event);
      }
    },
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ]
  });

Программная генерация событий

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

Эмуляция перетаскивания

Для эмуляции drag-событий необходимо создать объект события с основными параметрами:

function emulateDrag(target, startX, startY, endX, endY) {
  const dragEventStart = new Event('interact:dragstart', { bubbles: true });
  dragEventStart.clientX = startX;
  dragEventStart.clientY = startY;
  target.dispatchEvent(dragEventStart);

  const dragEventMove = new Event('interact:dragmove', { bubbles: true });
  dragEventMove.clientX = endX;
  dragEventMove.clientY = endY;
  target.dispatchEvent(dragEventMove);

  const dragEventEnd = new Event('interact:dragend', { bubbles: true });
  dragEventEnd.clientX = endX;
  dragEventEnd.clientY = endY;
  target.dispatchEvent(dragEventEnd);
}

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

  • clientX и clientY задают координаты курсора.
  • События dragstart, dragmove, dragend должны быть вызваны в правильной последовательности.
  • Метод dispatchEvent инициирует событие на элементе.

Использование встроенных методов Interact.js

Interact.js предоставляет метод interact.pointerMove() для более сложной эмуляции. Он позволяет передавать координаты, состояние кнопок мыши и идентификатор указателя:

interact.pointerMove({ 
  pointerId: 1, 
  pageX: 100, 
  pageY: 200, 
  buttons: 1 
});

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

Эмуляция жестов (gestures)

Для мультитач-жестов используется объект GestureEvent. Эмуляция вращения, масштабирования или пинча требует передачи нескольких касаний:

function emulateGesture(target, scale, rotation) {
  const gestureEvent = new Event('interact:gesturemove', { bubbles: true });
  gestureEvent.scale = scale;
  gestureEvent.rotation = rotation;
  target.dispatchEvent(gestureEvent);
}
  • scale управляет увеличением или уменьшением элемента.
  • rotation задаёт угол поворота в градусах.
  • События gesturestart и gestureend также могут быть вызваны для имитации начала и конца жеста.

Эмуляция изменения размера (resize)

Resize-события можно инициировать аналогично drag:

function emulateResize(target, deltaWidth, deltaHeight) {
  const resizeEvent = new Event('interact:resizemove', { bubbles: true });
  resizeEvent.deltaRect = { width: deltaWidth, height: deltaHeight };
  target.dispatchEvent(resizeEvent);
}
  • deltaRect указывает изменение размеров по осям.
  • Interact.js обновляет элементы через обработчики, привязанные к resizable().

Комбинированные сценарии

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

emulateDrag(box, 0, 0, 150, 150);
emulateResize(box, 50, 50);
emulateGesture(box, 1.2, 45);

В результате элемент перемещается, изменяет размер и масштабируется/вращается в одном сценарии.

Настройка ограничений и модификаторов при эмуляции

Модификаторы (modifiers) в Interact.js применяются автоматически и могут влиять на программно вызванные события. Для корректной работы эмуляции важно учитывать ограничения:

  • restrictRect — ограничивает перемещение или изменение размера элементом родителя.
  • snap — привязка к сетке или точкам.
  • invert — обратное перемещение при определённых условиях.

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

Особенности обработки событий

  • События в Interact.js могут быть отменены через event.preventDefault().
  • Программная эмуляция должна учитывать порядок вызова: start → move → end.
  • Для тестирования событий лучше использовать отдельные элементы-контейнеры, чтобы избежать конфликтов с реальными интерактивными действиями пользователя.

Примеры практических сценариев

  1. Автоматическое перемещение элементов по сценарию анимации Позволяет создавать интерактивные слайды, где элементы двигаются без вмешательства пользователя.

  2. Тестирование интерфейсов Проверка drag-and-drop, pinch-to-zoom и resizable-элементов без реального клика мышью.

  3. Синхронизация с другими библиотеками Можно сочетать с анимациями GSAP или Three.js для создания сложных интерактивных сцен.

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

Оглавление