RestrictRect - ограничение прямоугольником

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

Настройка ограничений через restrictRect

Чтобы применить ограничение, используется опция restrict при инициализации Interact.js:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: '.container',
        endOnly: true
      })
    ],
    inertia: true
  });

Разбор параметров:

  • restriction — задает область ограничения. Может быть:

    • CSS-селектором ('.container'),
    • DOM-элементом (document.getElementById('container')),
    • объектом с координатами { top, left, bottom, right }.

  • endOnly — если true, ограничение применяется только после завершения перетаскивания. Если false, элемент будет ограничен на каждом кадре движения.

  • elementRect — определяет, какая часть элемента учитывается при проверке ограничений (по умолчанию { top: 0, left: 0, bottom: 1, right: 1 }).

Координаты ограничения через объект

Можно задать ограничение не через селектор, а явно через координаты:

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

В этом случае элемент не сможет покинуть область с верхним левым углом в (50, 50) и нижним правым в (500, 300).

Ограничение с учетом размеров элемента

При перемещении важно учитывать размеры элемента, чтобы не допустить частичного выхода за границы контейнера. Для этого используется параметр elementRect:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: '.container',
        elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
        endOnly: false
      })
    ]
  });
  • { top: 0, left: 0, bottom: 1, right: 1 } — стандартное значение, при котором ограничение проверяется по всем границам элемента.
  • Изменение этих значений позволяет учитывать, например, только верхний левый угол при проверке.

Использование с resizable

RestrictRect также работает с изменением размеров элемента:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: '.container',
        endOnly: true
      })
    ]
  });
  • Элемент не сможет быть увеличен или уменьшен так, чтобы выйти за границы указанного контейнера.
  • Ограничение применяется независимо от направления изменения размеров.

Сочетание с другими модификаторами

Interact.js поддерживает комбинирование RestrictRect с другими модификаторами, например snap или restrictEdges:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.snap({ targets: [interact.snappers.grid({ x: 50, y: 50 })] }),
      interact.modifiers.restrictRect({
        restriction: '.container'
      })
    ]
  });
  • Snap обеспечивает прилипание к сетке.
  • RestrictRect гарантирует, что элемент останется внутри контейнера даже при прилипании.

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

  1. Использовать endOnly: true, если требуется плавное перетаскивание без жестких ограничений во время движения.
  2. Для динамических контейнеров задавать ограничение через функцию, возвращающую текущие координаты:
interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: function (target, element) {
          return element.parentNode.getBoundingClientRect();
        }
      })
    ]
  });
  1. В комбинации с resizable учитывать elementRect, чтобы изменение размеров не выводило элемент за пределы контейнера.
  2. Всегда проверять координаты при масштабировании страницы или контейнера, особенно если используются проценты или flex-контейнеры.

Ограничение внутри прокручиваемых контейнеров

Если элемент находится внутри контейнера с прокруткой, нужно учитывать смещение скролла:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: function (target, element) {
          const rect = element.parentNode.getBoundingClientRect();
          return {
            top: rect.top + element.parentNode.scrollTop,
            left: rect.left + element.parentNode.scrollLeft,
            bottom: rect.bottom + element.parentNode.scrollTop,
            right: rect.right + element.parentNode.scrollLeft
          };
        }
      })
    ]
  });

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

Ключевые особенности RestrictRect:

  • Гибкая настройка через селекторы, DOM-элементы или координаты.
  • Поддержка draggable и resizable.
  • Настройка с учетом размера элемента через elementRect.
  • Работает вместе с другими модификаторами.
  • Возможность динамических ограничений через функции.

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

Оглавление