Настройка активных краев и углов

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

Основы активных краев и углов

В Interact.js терминология следующая:

  • edges — активные грани элемента, с которых можно начать действие.
  • corners — углы элемента, обычно используются для масштабирования.
  • inertia и restrict влияют на поведение при взаимодействии с краями и углами.

Активные грани и углы задаются через опцию edges при подключении resizable или через modifiers для более сложной логики.

interact('.resize-target')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: 'parent'
      })
    ],
    inertia: true
  });

В этом примере активны все четыре края элемента, и его перемещение ограничено рамками родительского контейнера.

Определение активных краев

edges принимает объект с четырьмя булевыми свойствами: top, left, bottom, right.

  • true — край активен для взаимодействия.
  • false — край игнорируется.

Можно комбинировать активные края для создания частичных зон масштабирования:

edges: { top: false, left: true, bottom: true, right: false }

Такой элемент можно изменять только с левого и нижнего краев.

Настройка активных углов

Для работы с углами используют модификатор square corners через событие resizemove или кастомную проверку позиции курсора относительно границ.

interact('.resize-target')
  .resizable({
    edges: { top: true, left: true, bottom: true, right: true }
  })
  .on('resizemove', function (event) {
    const { x, y, width, height } = event.rect;
    event.target.style.width = width + 'px';
    event.target.style.height = height + 'px';
    event.target.style.transform = `translate(${x}px, ${y}px)`;
  });

Углы автоматически формируются на пересечении активных краев. Чтобы выделить конкретные углы, можно использовать кастомные условия в обработчике resizemove:

if (event.edges.top && event.edges.left) {
  console.log('Активен верхний левый угол');
}

Ограничение зон взаимодействия

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

  • restrictEdges — ограничивает движение или изменение размера элементом внутри родителя или заданного контейнера.
  • restrictRect — ограничивает размеры элемента по прямоугольной области.
  • restrictSize — минимальная и максимальная ширина/высота.

Пример ограничения активных краев внутри родительского блока:

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

endOnly: true гарантирует, что ограничения применяются только после окончания действия.

Настройка чувствительности к курсору

Можно регулировать чувствительность к положению курсора, чтобы края или углы реагировали только при нахождении курсора в пределах определённой зоны:

interact('.resize-target')
  .resizable({
    edges: { top: true, left: true, bottom: true, right: true },
    listeners: {
      move(event) {
        const margin = 10; // зона чувствительности в пикселях
        if (event.clientX - event.target.getBoundingClientRect().left < margin) {
          console.log('Левый край активен');
        }
      }
    }
  });

Комбинация перетаскивания и активных краев

Иногда требуется совместить drag и resize. В этом случае важно правильно настроить edges и listeners:

interact('.resize-drag-target')
  .draggable({ inertia: true })
  .resizable({
    edges: { top: true, left: true, bottom: true, right: true },
    modifiers: [
      interact.modifiers.restrictEdges({ outer: 'parent' })
    ]
  });

В такой конфигурации элемент можно перетаскивать всей областью, но изменять размер только с краёв и углов.

Советы по производительности

  • Ограничивайте активные края только необходимыми сторонами.
  • Для больших DOM-структур используйте delegated обработчики, чтобы не вешать события на каждый элемент.
  • Сочетайте inertia и restrict для естественного поведения и контроля границ.

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

Оглавление