Функции вместо статических значений

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

Динамическое ограничение области перемещения

Ограничение перемещения (restrict) часто задается объектом с фиксированными координатами:

interact('.draggable').draggable({
  modifiers: [
    interact.modifiers.restrictRect({
      restriction: { top: 0, left: 0, bottom: 500, right: 500 },
      endOnly: true
    })
  ]
});

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

interact('.draggable').draggable({
  modifiers: [
    interact.modifiers.restrictRect({
      restriction: function (target, interactable, elementRect) {
        const parent = target.parentElement.getBoundingClientRect();
        return {
          top: parent.top,
          left: parent.left,
          bottom: parent.bottom,
          right: parent.right
        };
      },
      endOnly: true
    })
  ]
});

Преимущества:

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

Функции для параметров snap

Снап (привязка) элементов к сетке или линиям также поддерживает функции для вычисления координат:

interact('.draggable').draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [
        function (x, y) {
          return { x: Math.round(x / 50) * 50, y: Math.round(y / 50) * 50 };
        }
      ],
      range: 30,
      relativePoints: [{ x: 0.5, y: 0.5 }]
    })
  ]
});

Особенности использования функций в snap:

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

Динамическое масштабирование и вращение

В Interact.js трансформации (масштабирование, вращение) могут зависеть от функций:

interact('.resizable').resizable({
  edges: { left: true, right: true, bottom: true, top: true },
  modifiers: [
    interact.modifiers.restrictSize({
      min: function (target, element) {
        return { width: 50, height: 50 };
      },
      max: function (target, element) {
        const parent = element.parentElement.getBoundingClientRect();
        return { width: parent.width, height: parent.height };
      }
    })
  ],
  inertia: true
});

Выводы:

  • min и max можно вычислять на лету для каждого элемента.
  • Размер элемента ограничивается относительно родителя или других динамических условий.
  • Функции дают полный контроль над изменением размеров, что невозможно при статических значениях.

Использование функций для событий

Некоторые свойства событий, например, listeners, можно настраивать через функции, возвращающие обработчики:

interact('.draggable').on('dragmove', function (event) {
  const speed = calculateSpeed(event);
  event.target.style.transform = `translate(${event.dx * speed}px, ${event.dy * speed}px)`;
});
  • event содержит текущие координаты, скорость и смещение.
  • Можно использовать внешние функции для расчета динамического поведения.
  • Такой подход позволяет реализовать физику движения, динамическое ускорение и другие эффекты.

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

  • Использовать функции для всех параметров, которые зависят от состояния DOM или размеров окна. Это делает код гибким и адаптивным.

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

  • Совмещать функции с модификаторами. Функции отлично интегрируются с snap, restrict, restrictSize и другими модификаторами.

  • Тестировать разные сценарии. Поскольку функции вызываются часто, важно проверять, что они всегда возвращают корректные значения, иначе элементы могут “зависнуть” или выйти за границы.

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

Оглавление