RestrictEdges - ограничение краев

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

Основная концепция RestrictEdges

RestrictEdges работает на основе ограничения краёв (edges) перетаскиваемого объекта. Основная идея заключается в том, чтобы не позволять элементу выйти за пределы заданной области. Область может задаваться как в пикселях, так и в процентах относительно родительского контейнера или документа.

Основные параметры:

  • top, left, bottom, right — границы, за которые нельзя перемещать объект.
  • inner, outer — позволяют выбирать способ ограничения: внутренние границы контейнера (inner) или внешние (outer).

Пример базовой конфигурации:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: { top: 0, left: 0, bottom: 300, right: 500 }
      })
    ]
  });

В этом примере элемент нельзя переместить выше верхней границы (top: 0), левее левой границы (left: 0) и за нижнюю или правую границу (bottom: 300, right: 500).

Параметры объекта outer

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

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

interact('.box')
  .draggable({
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: {
          top: 50,
          left: 50,
          bottom: 400,
          right: 600
        }
      })
    ]
  });

В этом случае объект не может выйти за пределы прямоугольной области с верхним левым углом (50,50) и нижним правым (600,400).

Использование inner для ограничения внутренних краёв

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

Пример:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictEdges({
        inner: { top: 0, left: 0, bottom: 300, right: 500 }
      })
    ]
  });

Здесь верхняя и левая границы объекта не могут выйти за границы контейнера, а нижний и правый края учитываются исходя из размеров элемента, что предотвращает «выход» объекта наружу.

Комбинированное ограничение

Можно использовать одновременно inner и outer, чтобы комбинировать ограничения и получать более гибкое поведение:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictEdges({
        inner: { top: 0, left: 0 },
        outer: { bottom: 500, right: 800 }
      })
    ]
  });
  • inner контролирует, чтобы верх и левая стороны оставались в пределах.
  • outer контролирует нижнюю и правую границы с учётом размеров элемента.

Такой подход позволяет создавать интерактивные элементы, которые не «выпадают» из заданной области, при этом оставаясь гибкими в позиционировании.

Ограничение с использованием родительского элемента

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

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: element => {
          const parent = element.parentElement;
          return {
            top: 0,
            left: 0,
            bottom: parent.offsetHeight,
            right: parent.offsetWidth
          };
        }
      })
    ]
  });

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

Работа с масштабированием и изменением размеров

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

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: { top: 0, left: 0, bottom: 400, right: 600 }
      })
    ]
  });

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

Практические советы

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

Совместимость с другими модификаторами

RestrictEdges может быть комбинирован с другими модификаторами Interact.js, например:

  • snap — привязка к сетке или направляющим.
  • restrictRect — более сложные ограничения с прямоугольниками.
  • restrictSize — ограничение размеров при изменении.

Последовательность модификаторов влияет на поведение: сначала выполняются более общие ограничения (outer/inner), затем дополнительные модификаторы, такие как snap.

Итоговое поведение

Использование RestrictEdges обеспечивает:

  • Полный контроль над положением и размерами элементов.
  • Предотвращение выхода объектов за границы контейнеров.
  • Совместимость с динамическими изменениями размеров и положений.
  • Гибкость при комбинировании с другими модификаторами Interact.js.
Оглавление