Метод interact()

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

interact(target)

где target — это CSS-селектор, DOM-элемент или NodeList. Этот метод возвращает объект Interactable, через который настраиваются все интерактивные свойства элемента.

Пример базового использования

interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: 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);
      }
    }
  });

В этом примере:

  • .draggable — CSS-класс элемента, который будет перетаскиваться.
  • inertia: true добавляет эффект инерции при завершении перетаскивания.
  • modifiers.restrictRect ограничивает область перемещения элементом-родителем.
  • listeners.move обрабатывает событие движения, обновляя координаты и стиль трансформации.

Настройка взаимодействий

Метод interact() позволяет назначать несколько видов интерактивности на один элемент:

  • Draggable — перемещение элементов.
  • Resizable — изменение размера.
  • Gesturable — жесты с масштабированием и вращением.
  • Dropzone — зоны, куда можно «бросать» элементы.
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}px, ${y}px)`
        });
      }
    },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 50, height: 50 },
        max: { width: 500, height: 500 }
      })
    ],
    inertia: true
  });

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

  • edges определяет, с каких сторон элемент можно изменять.
  • modifiers.restrictSize ограничивает минимальный и максимальный размер.
  • Событие move позволяет динамически обновлять размеры и положение элемента.

Использование селекторов и DOM-элементов

Метод interact() принимает разные типы аргументов:

  1. CSS-селектор — ' .className ' или '#id'.
  2. DOM-элемент — document.getElementById('element').
  3. NodeList или массив элементов — document.querySelectorAll('.items').
const items = document.querySelectorAll('.item');
interact(items).draggable({ inertia: true });

Это позволяет легко назначать одинаковую интерактивность сразу нескольким элементам.

Многоуровневые настройки и chaining

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

interact('.widget')
  .draggable({ inertia: true })
  .resizable({ edges: { top: true, right: true } })
  .gesturable({
    listeners: {
      move(event) {
        let scale = parseFloat(event.target.dataset.scale || 1);
        scale *= (1 + event.ds);
        event.target.style.transform = `scale(${scale})`;
        event.target.dataset.scale = scale;
      }
    }
  });

Такое использование позволяет комбинировать несколько типов взаимодействий без дублирования кода.

Настройка модификаторов и ограничений

Modifiers обеспечивают контроль над поведением элемента во время взаимодействия. Наиболее часто применяются:

  • restrictRect — ограничение области перемещения.
  • restrictSize — ограничение размера.
  • snap — привязка к сетке или определённым координатам.
  • aspectRatio — сохранение пропорций при изменении размера.
interact('.snap-item')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        targets: [
          interact.createSnapGrid({ x: 50, y: 50 })
        ],
        range: Infinity,
        relativePoints: [{ x: 0, y: 0 }]
      })
    ]
  });

С помощью snap можно создавать элементы, которые «прилипают» к сетке или другим объектам.

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

Interact.js предоставляет следующие основные события:

  • start — начало взаимодействия.
  • move — движение элемента.
  • end — завершение действия.
  • inertiaStart — начало инерции.
  • gesture — события жестов для масштабирования и вращения.

Пример с событиями:

interact('.draggable')
  .draggable({
    listeners: {
      start(event) { console.log('Start', event); },
      move(event) { /* логика перемещения */ },
      end(event) { console.log('End', event); }
    }
  });

Вывод

Метод interact() является универсальным инструментом для создания сложных интерактивных интерфейсов. Он сочетает простоту назначения взаимодействий с гибкой системой модификаторов и событий. Правильная работа с Interactable, событиями и модификаторами позволяет реализовывать масштабируемые и удобные в использовании интерактивные элементы на веб-страницах.

Оглавление