SnapEdges - привязка краев

SnapEdges — это функциональность библиотеки Interact.js, позволяющая привязывать движимые элементы к определённым линиям или границам при перетаскивании или изменении размера. Это особенно полезно для интерфейсов, где элементы должны аккуратно выравниваться относительно друг друга или контейнера.

SnapEdges работает на основе объектов с координатами и длинами сторон, которые определяют линии привязки. Эти линии могут быть горизонтальными, вертикальными, или комбинированными.

Настройка SnapEdges

SnapEdges настраивается через объект interactable.snapEdges({ ... }). Основные параметры:

  • targets — массив объектов, описывающих линии привязки. Каждый объект может содержать:

    • x — координата вертикальной линии.
    • y — координата горизонтальной линии.
    • range — зона, в пределах которой происходит привязка (в пикселях).

  • offset — смещение элемента относительно линии привязки.

  • enabled — логическое значение, определяющее включение привязки.

Пример конфигурации:

interact('.draggable')
  .draggable({
    listeners: {
      move (event) {
        event.target.style.transform =
          `translate(${event.pageX}px, ${event.pageY}px)`;
      }
    }
  })
  .snapEdges({
    targets: [
      { x: 100 },           // вертикальная линия x=100
      { y: 200 }            // горизонтальная линия y=200
    ],
    range: 20,
    offset: { x: 0, y: 0 },
    enabled: true
  });

В этом примере элемент будет «прилипать» к линиям x=100 и y=200, если курсор находится в пределах 20 пикселей от линии.

Типы линий привязки

  1. Горизонтальные линии (y) Позволяют привязывать верхнюю или нижнюю границу элемента к фиксированной горизонтальной координате. Используется для выравнивания по верхнему краю, середине или низу контейнера.

  2. Вертикальные линии (x) Привязка по вертикали. Элемент может «защелкнуться» слева, по центру или справа относительно линии.

  3. Комбинированные линии Можно задать и x, и y, чтобы элемент привязывался к конкретной точке.

Диапазон привязки (range)

Параметр range определяет, насколько далеко от линии элемент может находиться, чтобы привязка сработала. Значение задается в пикселях.

  • Меньший диапазон → более строгая привязка, элемент «прыгает» только при близком подходе к линии.
  • Больший диапазон → элемент легче «прилипает», что создаёт эффект магнитного притяжения.
snapEdges({
  targets: [{ x: 300 }],
  range: 50   // более мягкая привязка
});

Смещение привязки (offset)

Смещение позволяет элементу не точно совпадать с линией, а быть от неё на заданное расстояние.

snapEdges({
  targets: [{ x: 200 }],
  range: 20,
  offset: { x: 10, y: 0 }  // элемент остановится на 10px правее линии
});

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

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

SnapEdges может использоваться вместе с:

  • Restrict — ограничение перемещения внутри контейнера.
  • Snap — привязка к сетке или другим объектам.
  • Resize — привязка при изменении размеров.

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

interact('.box')
  .draggable()
  .snapEdges({
    targets: [{ x: 100 }, { y: 100 }],
    range: 15
  })
  .restrict({
    restriction: 'parent',
    endOnly: true
  });

Элемент будет привязываться к линиям и оставаться в пределах родительского контейнера.

Динамическое изменение линий привязки

С помощью функции interactable.snapEdges({ targets: getTargets() }) можно динамически менять линии привязки во время работы приложения.

function getTargets() {
  return [
    { x: window.innerWidth / 2 },
    { y: window.innerHeight / 2 }
  ];
}

interact('.draggable')
  .snapEdges({
    targets: getTargets,
    range: 25
  });

Такой подход удобен для адаптивных интерфейсов, где координаты линий зависят от размеров окна или расположения других элементов.

События и обратная связь

SnapEdges генерирует событие snap, которое позволяет реагировать на момент привязки элемента к линии.

interact('.draggable')
  .on('snap', function (event) {
    console.log('Элемент привязан к линии:', event.target);
  });

Можно использовать для:

  • Отображения визуального индикатора привязки.
  • Записи координат привязанного элемента.
  • Активации других логических операций интерфейса.

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

  • Выравнивание множества элементов: задавать несколько горизонтальных и вертикальных линий, чтобы элементы автоматически выстраивались в сетку.
  • Мягкая привязка: увеличивать range для удобства пользователя.
  • Сочетание с offset: использовать для отступов и аккуратного визуального расположения.
  • Динамическое обновление линий: применять для интерактивных редакторов, дашбордов и конструктора интерфейсов.

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

Оглавление