Программное управление действиями

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

Каждое взаимодействие создаёт объект события InteractEvent, содержащий полезные свойства:

  • target — элемент DOM, с которым происходит взаимодействие.
  • currentTarget — элемент, на котором установлен слушатель события.
  • type — тип события: dragstart, dragmove, dragend, resizestart, resizemove, resizeend, gesturestart, gesturemove, gestureend.
  • dx, dy — смещение по оси X и Y с момента последнего события.
  • rect — текущие размеры и положение элемента относительно родителя.

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

Настройка перетаскивания

Для создания интерактивного перетаскиваемого элемента используется метод interact(target).draggable(options). Основные параметры:

  • inertia — включает инерцию движения после отпускания элемента.
  • modifiers — массив ограничителей (restrict, snap, restrictRect) для ограничения перемещений.
  • listeners — объект с коллбэками: start, move, end.

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

interact('.draggable').draggable({
  inertia: true,
  listeners: {
    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);
    }
  }
});

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

Изменение размеров элементов

Метод interact(target).resizable(options) управляет масштабированием и размером элементов. Основные настройки:

  • edges — объект, указывающий, какие стороны элемента можно изменять (left, right, top, bottom).
  • listeners — обработчики событий start, move, end.
  • modifiers — ограничения по минимальной и максимальной ширине/высоте.

Пример динамического изменения размеров:

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;

      Object.assign(event.target.style, {
        width: `${event.rect.width}px`,
        height: `${event.rect.height}px`,
        transform: `translate(${x + event.deltaRect.left}px, ${y + event.deltaRect.top}px)`
      });

      event.target.dataset.x = x + event.deltaRect.left;
      event.target.dataset.y = y + event.deltaRect.top;
    }
  },
  modifiers: [
    interact.modifiers.restrictSize({
      min: { width: 50, height: 50 },
      max: { width: 500, height: 500 }
    })
  ]
});

Использование deltaRect позволяет корректно вычислять смещение при изменении размеров и предотвращает скачки при масштабировании.

Жесты и масштабирование

Interact.js поддерживает работу с мультитач-жестами через gesturable(). Объект события содержит:

  • scale — коэффициент масштабирования.
  • distance — изменение расстояния между точками касания.
  • angle — угол поворота жеста.

Пример динамического масштабирования:

interact('.gesturable').gesturable({
  listeners: {
    move(event) {
      const target = event.target;
      const currentScale = parseFloat(target.dataset.scale) || 1;

      const newScale = currentScale * event.scale;
      target.style.transform = `scale(${newScale})`;
      target.dataset.scale = newScale;
    }
  }
});

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

Ограничители и привязки

Modifiers — мощный инструмент для программного управления поведением элементов:

  1. restrictRect — ограничение перемещения и размеров внутри заданного контейнера.
  2. snap — привязка к сетке, другим элементам или линиям.
  3. restrictEdges — предотвращение выхода сторон элемента за пределы.
  4. restrictSize — контроль минимальной и максимальной ширины/высоты.

Пример привязки к сетке:

interact('.draggable').draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [interact.snappers.grid({ x: 50, y: 50 })],
      range: Infinity,
      relativePoints: [{ x: 0, y: 0 }]
    })
  ]
});

Такое программное управление позволяет точно позиционировать элементы и предотвращает хаотичное движение.

Программная активация и деактивация действий

Interact.js предоставляет методы interactable.draggable(false) или interactable.resizable(false) для отключения конкретного действия. Это полезно для динамических интерфейсов, где состояние элементов меняется в зависимости от условий:

const box = interact('.box');

function toggleDrag(enable) {
  box.draggable(enable);
}

Можно комбинировать отключение с включением модификаторов для тонкой настройки поведения элементов в реальном времени.

Управление событиями глобально

Для управления всеми событиями на странице можно использовать Delegated Events через метод interact(selector).on(). Это позволяет отслеживать действия на динамически создаваемых элементах без повторной инициализации:

interact('body').on('dragmove', '.dynamic-draggable', event => {
  const target = event.target;
  const x = (parseFloat(target.dataset.x) || 0) + event.dx;
  const y = (parseFloat(target.dataset.y) || 0) + event.dy;
  
  target.style.transform = `translate(${x}px, ${y}px)`;
  target.dataset.x = x;
  target.dataset.y = y;
});

Такое управление делает интерфейс гибким и масштабируемым.

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

Interact.js не содержит встроенной системы анимации, но легко интегрируется с requestAnimationFrame, GSAP или Anime.js для плавного перемещения и масштабирования элементов:

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

      gsap.to(target, { x, y, duration: 0.2 });
      target.dataset.x = x;
      target.dataset.y = y;
    }
  }
});

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

Резюме методов программного контроля

  • interactable.draggable(options) — настройка и управление перетаскиванием.
  • interactable.resizable(options) — управление изменением размеров.
  • interactable.gesturable(options) — мультитач-жесты.
  • modifiers — ограничения, привязки и сетки.
  • dataset и transform — ключ к хранению состояния и управлению положением.
  • Глобальные и делегированные события — контроль за динамическими элементами.

Эффективное программное управление действиями с помощью Interact.js позволяет создавать интерактивные интерфейсы высокой сложности, полностью контролируемые через JavaScript.

Оглавление