Концепция модификаторов

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

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

Виды модификаторов

Interact.js предлагает несколько встроенных типов модификаторов:

  1. restrict Ограничивает движение элемента внутри определённой области или относительно родителя.

    Пример:

    interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrict({
        restriction: 'parent',   // Ограничение по родительскому элементу
        endOnly: true            // Ограничение применяется только при завершении перетаскивания
      })
    ]
  });

    Ключевые параметры:

    • restriction – может быть элементом, селектором, объектом с координатами ({top, left, bottom, right}) или функцией, возвращающей область.
    • endOnly – применяет ограничение только после окончания взаимодействия.

  2. snap Применяет привязку к сетке или определённым точкам, позволяя элементу «прилипать» к определённым координатам.

    Пример:

    interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        targets: [
          interact.snappers.grid({ x: 50, y: 50 })  // Сетка 50x50px
        ],
        range: Infinity,
        relativePoints: [{ x: 0.5, y: 0.5 }]
      })
    ]
  });

    Ключевые параметры:

    • targets – массив функций или объектов, определяющих точки привязки.
    • range – максимальное расстояние для срабатывания привязки.
    • relativePoints – координаты относительно размеров элемента, к которым применяется привязка.

  3. restrictEdges Ограничивает движение так, чтобы края элемента не выходили за границы области. Отличается от restrict тем, что учитывает размеры элемента при проверке ограничений.

    Пример:

    interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: 'parent',
        endOnly: true
      })
    ]
  });

  4. restrictSize Применяется к изменению размера элемента, ограничивая минимальные и максимальные размеры.

    Пример:

    interact('.resizable')
  .resizable({
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 },
        max: { width: 500, height: 300 }
      })
    ]
  });

  5. snapEdges Создаёт привязку краёв элемента к краям других элементов или области. Используется для аккуратного выравнивания элементов на странице.

Общая структура модификатора

Каждый модификатор создаётся вызовом соответствующей функции (interact.modifiers.restrict(), interact.modifiers.snap() и т.д.) с объектом конфигурации. Основные свойства:

  • enabled – включает или отключает модификатор.
  • options – набор параметров, специфичных для конкретного модификатора.
  • endOnly – применяет изменения только после завершения взаимодействия.
  • lockAxis – блокирует движение по одной из осей ('x' или 'y').

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

Создание пользовательских модификаторов

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

Пример:

const customModifier = {
  start: (arg) => { /* инициализация при старте взаимодействия */ },
  set: (arg) => {
    // Изменение координат элемента
    arg.coords.x = Math.round(arg.coords.x / 10) * 10; // округление до ближайших 10px
    arg.coords.y = Math.round(arg.coords.y / 10) * 10;
    return arg.coords;
  },
  beforeEnd: (arg) => { /* финальная корректировка перед завершением */ }
};

interact('.draggable')
  .draggable({
    modifiers: [ customModifier ]
  });

Пояснения к методам:

  • start – вызывается один раз при начале взаимодействия.
  • set – вызывается на каждом кадре движения и получает текущие координаты.
  • beforeEnd – вызывается перед завершением действия, позволяет окончательно скорректировать координаты.

Практические рекомендации

  • Использовать restrict и restrictEdges для предотвращения выхода элементов за пределы контейнера.
  • Для сеточного размещения или точного выравнивания использовать snap или snapEdges.
  • Комбинировать модификаторы, чтобы одновременно ограничивать движение и применять привязку к сетке.
  • При необходимости создавать кастомные модификаторы для уникальных правил движения, масштабирования или вращения.

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

Оглавление