Базовое изменение размера

Interact.js предоставляет мощный и гибкий механизм для динамического изменения размеров элементов на веб-странице с помощью мыши или касаний. Основным методом для этого является interact(target).resizable(), где target — это CSS-селектор или DOM-элемент, к которому применяется функциональность изменения размера.

interact('.resize-element').resizable({
  edges: { left: true, right: true, bottom: true, top: true },
  modifiers: [
    interact.modifiers.restrictSize({
      min: { width: 50, height: 50 },
      max: { width: 500, height: 500 }
    })
  ],
  inertia: true
});

В данном примере:

  • edges — определяет стороны элемента, за которые можно тянуть для изменения размера. Значение true означает, что конкретная грань активна для изменения.
  • modifiers — массив модификаторов, которые позволяют ограничивать размеры элемента или накладывать другие правила.
  • inertia — придает “инерцию” движению, делая изменение размера более плавным и естественным.

События изменения размера

Interact.js генерирует несколько ключевых событий при работе с ресайзингом:

  1. resizestart — возникает в момент начала изменения размера.
  2. resizemove — срабатывает при каждом изменении размера элемента.
  3. resizeend — фиксирует окончание операции изменения размера.
interact('.resize-element')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizestart', function (event) {
    console.log('Начало изменения размера', event.target);
  })
  .on('resizemove', function (event) {
    let target = event.target;
    let x = (parseFloat(target.getAttribute('data-x')) || 0);
    let y = (parseFloat(target.getAttribute('data-y')) || 0);

    target.style.width = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.transform = `translate(${x}px, ${y}px)`;

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  })
  .on('resizeend', function (event) {
    console.log('Изменение размера завершено');
  });

Ключевые моменты при обработке resizemove:

  • event.rect содержит актуальные ширину (width) и высоту (height) элемента.
  • event.deltaRect показывает изменения размеров и смещения относительно начальной позиции.
  • Использование transform: translate(x, y) позволяет корректно управлять позиционированием элемента, особенно если изменение размера происходит с верхней или левой грани.

Ограничение размеров

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

modifiers: [
  interact.modifiers.restrictSize({
    min: { width: 100, height: 100 },
    max: { width: 800, height: 600 }
  })
]

Можно комбинировать несколько модификаторов, например:

  • restrictEdges — предотвращает выход элемента за пределы родительского контейнера.
  • snapSize — привязывает размеры к сетке или определенным шагам.
modifiers: [
  interact.modifiers.snapSize({
    targets: [interact.snappers.grid({ x: 20, y: 20 })]
  })
]

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

Изменение размера с сохранением пропорций

Для поддержания фиксированного соотношения сторон используется модификатор aspectRatio:

modifiers: [
  interact.modifiers.aspectRatio({
    ratio: 'preserve'
  })
]

В этом случае ширина и высота элемента изменяются пропорционально. Можно задать конкретное соотношение, например ratio: 16/9, что полезно для работы с видео-плеерами или изображениями.

Интеграция с drag & drop

Изменение размера часто комбинируется с перетаскиванием. Interact.js позволяет одновременно подключать draggable() и resizable() к одному элементу:

interact('.resize-element')
  .draggable({
    listeners: { move: dragMoveListener }
  })
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: { move: resizeMoveListener },
    modifiers: [
      interact.modifiers.restrictSize({ min: { width: 50, height: 50 } })
    ]
  });

Важно синхронизировать координаты x и y между drag и resize, чтобы элемент корректно отображался и перемещался при одновременном изменении размера.

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

  • Использовать data-x и data-y для хранения текущих координат элемента при ресайзинге. Это позволяет избежать конфликтов с CSS-свойствами top и left.
  • Всегда комбинировать resizestart, resizemove и resizeend для полного контроля над поведением элемента.
  • Модификаторы делают поведение гибким: ограничение размеров, сетка, сохранение пропорций — все легко настраивается.
  • Для элементов с абсолютным позиционированием лучше использовать transform: translate вместо прямой установки top и left во время изменения размера.

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

Оглавление