Методы настройки действий

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

Метод draggable()

Метод draggable() делает элемент перетаскиваемым. Основные параметры:

interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,
    listeners: {
      move: dragMoveListener,
      end: dragEndListener
    }
  });

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

  • inertia – включает инерцию после отпускания элемента, создавая плавное движение.
  • modifiers – набор правил ограничения движения. Например, restrictRect ограничивает перемещение в пределах родителя.
  • autoScroll – позволяет странице автоматически прокручиваться при перетаскивании к краям.
  • listeners – события move, start, end, используемые для отслеживания и обработки перетаскивания.

Функция dragMoveListener может быть реализована через изменение стилей transform элемента:

function dragMoveListener(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);
}

Метод resizable()

Метод resizable() позволяет изменять размеры элемента. Основные настройки:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: 'parent'
      }),
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 },
        max: { width: 500, height: 300 }
      })
    ],
    inertia: true,
    listeners: {
      move(event) {
        const target = event.target;
        let x = (parseFloat(target.getAttribute('data-x')) || 0);
        let y = (parseFloat(target.getAttribute('data-y')) || 0);

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

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

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

Особенности:

  • edges определяет стороны элемента, за которые можно тянуть.
  • restrictEdges ограничивает выход за пределы родительского контейнера.
  • restrictSize задаёт минимальные и максимальные размеры.
  • В listeners.move корректируется позиция с учётом изменения размеров, чтобы элемент не «скакал» при растяжении.

Метод gesturable()

Позволяет обрабатывать жесты мультитач: масштабирование, вращение, перемещение.

interact('.gesturable')
  .gesturable({
    listeners: {
      start(event) { console.log('gesture start'); },
      move(event) {
        const target = event.target;
        let scale = (parseFloat(target.getAttribute('data-scale')) || 1) * (1 + event.ds);
        let angle = (parseFloat(target.getAttribute('data-angle')) || 0) + event.da;

        target.style.transform = `scale(${scale}) rotate(${angle}deg)`;
        target.setAttribute('data-scale', scale);
        target.setAttribute('data-angle', angle);
      },
      end(event) { console.log('gesture end'); }
    }
  });

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

  • event.ds – относительное изменение масштаба с последнего события.
  • event.da – изменение угла поворота в градусах.
  • Сохраняется текущий масштаб и угол через data-атрибуты для непрерывности при последовательных жестах.

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

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

  • restrictRect – ограничивает область перемещения.
  • restrictEdges – не позволяет перетаскивать края элемента за пределы контейнера.
  • restrictSize – минимальные и максимальные размеры.
  • snap – привязка к сетке или координатам.

Пример использования snap для перетаскивания:

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

События и слушатели

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

  • start – начало взаимодействия (например, перетаскивания).
  • move – движение элемента в процессе действия.
  • end – завершение действия.
  • inertiaStart – начало инерционного движения.

События можно комбинировать с listeners и подключать несколько действий к одному элементу:

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

Управление действиями через actionChecker

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

interact('.element').draggable({
  actionChecker(event, defaultAction) {
    if (event.ctrlKey) return null; // запрет действия при зажатом Ctrl
    return defaultAction;
  }
});

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

Интеграция нескольких действий

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

interact('.multi')
  .draggable({ listeners: { move: dragMoveListener } })
  .resizable({ edges: { left: true, right: true, bottom: true, top: true } })
  .gesturable({ listeners: { move: gestureMoveListener } });

Ключевой аспект – корректное использование data-атрибутов для хранения состояния (позиция, масштаб, угол), чтобы все действия не конфликтовали между собой.

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

Оглавление