Данные события

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

Основные типы событий

Interact.js классифицирует события по типу взаимодействия:

  1. Drag Events (События перетаскивания) Основные события для элементов, которые могут перемещаться:

    • dragstart — срабатывает при начале перетаскивания. Используется для инициализации состояния элемента, изменения стилей или сохранения начальной позиции.
    • dragmove — происходит при каждом изменении положения элемента. Позволяет обновлять координаты и визуально перемещать элемент.
    • dragend — вызывается при завершении перетаскивания. Часто применяется для закрепления элемента в новом месте или запуска анимации возврата.

  2. Resize Events (События изменения размера) Применяются к элементам, которые могут масштабироваться:

    • resizestart — фиксирует начальное состояние перед изменением размеров.
    • resizemove — вызывается при каждом изменении ширины или высоты. Позволяет динамически обновлять размеры элемента и связанные с ним стили.
    • resizeend — срабатывает после окончания изменения размера, используется для сохранения новых размеров и синхронизации с другими компонентами.

  3. Gesture Events (События жестов) Обрабатывают мультитач-взаимодействия и жесты:

    • gesturestart — начало жеста, например, двухпальцевое масштабирование.
    • gesturemove — отслеживает движение пальцев и вычисляет угол поворота и коэффициент масштабирования.
    • gestureend — завершение жеста, используется для применения финальных изменений к элементу.

Подписка на события

Для подписки используется метод .on(event, listener).

Пример для перетаскиваемого элемента:

interact('.draggable')
  .draggable({
    listeners: {
      start(event) {
        console.log('Начало перетаскивания', event.target);
      },
      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);
      },
      end(event) {
        console.log('Перетаскивание завершено', event.target);
      }
    }
  });
  • event.target — DOM-элемент, с которым произошло событие.
  • event.dx, event.dy — смещение элемента относительно предыдущего положения.
  • data-x, data-y — атрибуты для хранения текущей позиции, что позволяет корректно вычислять новые координаты.

Объект события

Каждое событие Interact.js предоставляет объект event со следующими ключевыми свойствами:

  • type — тип события (dragmove, resizemove, gesturestart и т.д.).
  • target — элемент, на котором произошло событие.
  • interactable — объект Interactable, к которому привязан элемент.
  • delta — объект с изменениями координат или размеров, часто содержит dx и dy.
  • rect — объект с текущими координатами и размерами элемента (left, top, width, height).
  • page — координаты события относительно страницы (page.x, page.y).
  • pointer — информация о точке касания или мыши, включая идентификатор и тип (touch, mouse).

Делегирование событий

Interact.js поддерживает делегирование, что позволяет подписывать одно событие на родительский элемент для обработки всех дочерних элементов. Используется селектор при инициализации interactable:

interact('#container')
  .draggable({
    listeners: {
      move(event) {
        console.log('Элемент внутри контейнера перетаскивается:', event.target);
      }
    },
    // делегирование для всех элементов с классом .item внутри контейнера
    ignoreFrom: '.non-draggable',
    allowFrom: '.item'
  });
  • allowFrom — элементы, для которых событие разрешено.
  • ignoreFrom — элементы, для которых событие запрещено.

Обработка множественных событий

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

interact('.multi')
  .draggable({ listeners: { move: dragMoveListener } })
  .resizable({ listeners: { move: resizeMoveListener } });

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

Фильтрация событий

Можно фильтровать события по кнопкам мыши или типам касания, используя свойство buttons:

interact('.draggable')
  .draggable({
    listeners: { move: dragMoveListener },
    mouseButtons: [1] // Только левая кнопка мыши
  });

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

function dragMoveListener(event) {
  if (event.pointerType === 'touch') {
    console.log('Перетаскивание пальцем');
  }
}

Прерывание события

Метод event.interactable или вызов event.stopPropagation() позволяют прервать всплытие события или предотвратить его выполнение на других элементах. Это особенно важно при сложных интерфейсах с вложенными элементами, где одно событие может запускать несколько обработчиков.

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

События Interact.js совместимы с нативными DOM-событиями, что позволяет комбинировать их с addEventListener или фреймворками вроде React, Vue или Angular, передавая данные о позиции и состоянии элемента в компоненты и обновляя их интерфейс.

Оглавление