Ограничения минимального и максимального размера

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

Установка ограничений размера

Для установки ограничений используется метод restrictSize, который применяется в сочетании с обработчиком изменения размера (resizable). Ограничения задаются через объект с ключами min и max, где можно указывать ширину и высоту отдельно:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      move(event) {
        let { x, y } = event.target.dataset;

        x = (parseFloat(x) || 0);
        y = (parseFloat(y) || 0);

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        });
      }
    },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 },
        max: { width: 500, height: 300 }
      })
    ],
    inertia: true
  });

Ключевые моменты:

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

Применение отдельных ограничений для сторон

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

modifiers: [
  interact.modifiers.restrictSize({
    min: { width: 150, height: 100 },
    max: { width: 400, height: 250 },
    // Применение к конкретным сторонам
    endOnly: true
  })
]
  • endOnly: true — ограничение применяется только после завершения действия изменения размера, что делает движение более плавным.
  • Можно комбинировать с другими модификаторами, например, snap для выравнивания по сетке.

Ограничения в процентах и относительные размеры

Interact.js поддерживает использование относительных величин, что позволяет адаптировать элементы под динамический размер контейнера:

interact('.resizable')
  .resizable({
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: '20%', height: '10%' },
        max: { width: '80%', height: '50%' }
      })
    ]
  });
  • Значения в процентах вычисляются относительно родительского элемента.
  • Поддерживается смешанное использование абсолютных и относительных величин.

Динамическая настройка ограничений

Можно изменять ограничения в процессе работы, используя свойства объекта modifiers. Например, менять максимальную ширину элемента в зависимости от контекста:

const resizable = interact('.resizable').resizable({
  edges: { left: true, right: true, bottom: true, top: true },
  modifiers: [
    interact.modifiers.restrictSize({
      min: { width: 50, height: 50 },
      max: { width: 300, height: 200 }
    })
  ]
});

function updateMaxWidth(newWidth) {
  resizable.modifiers[0].options.max.width = newWidth;
}
  • Такой подход полезен для интерфейсов с адаптивным дизайном или изменяющимися условиями пользовательского взаимодействия.

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

Interact.js позволяет комбинировать drag и resize. Ограничения размеров могут использоваться вместе с ограничением перемещения:

interact('.box')
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent'
      })
    ]
  })
  .resizable({
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 },
        max: { width: 500, height: 300 }
      })
    ]
  });
  • restrictRect ограничивает область перемещения элементом.
  • Совмещение с restrictSize обеспечивает полный контроль над поведением элемента.

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

  • Всегда задавать минимальные размеры, чтобы предотвратить слишком маленькие элементы, которые могут стать нечитаемыми.
  • Максимальные размеры помогают избежать выхода за пределы контейнера.
  • Использование endOnly делает взаимодействие более естественным при быстром изменении размера.
  • Комбинирование с snap или restrictRect позволяет создавать сложные интерфейсы с динамическими и ограниченными элементами.

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

Оглавление