Плавающий режим

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

Включение плавающего режима

Для активации плавающего режима необходимо задать опцию float при инициализации сетки:

const grid = GridStack.init({
  float: true
});

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

  • float: true — элементы могут свободно «плыть» вверх при наличии свободного пространства.
  • При float: false (значение по умолчанию) элементы остаются в строгих рядах, даже если выше есть свободное место.

Влияние на размещение элементов

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

Пример добавления нового виджета с автоматическим позиционированием:

grid.addWidget({
  width: 2,
  height: 2,
  content: '<div class="grid-stack-item-content">Новый блок</div>'
});

При включенном float виджет автоматически поднимется вверх, если выше есть свободное место, а соседние блоки сдвинутся для оптимального заполнения пространства.

Управление поведением при перетаскивании

Плавающий режим влияет на алгоритм drag & drop:

  • Элемент можно перемещать свободно, и после отпускания мыши он приподнимется к ближайшему свободному ряду.
  • Если виджет перемещается вниз, Gridstack освобождает промежуточное пространство, сдвигая другие блоки.
  • Для временного отключения плавающего поведения при перетаскивании можно использовать метод:
grid.float(false); // временно фиксируем элементы

После завершения операций можно вернуть плавающий режим:

grid.float(true);

Взаимодействие с методами Layout и Compact

Gridstack.js предоставляет методы для оптимизации расположения виджетов:

  • grid.compact() — вручную инициирует сжатие элементов вверх, что особенно полезно после массового удаления блоков.
  • grid.update() — обновляет позиции элементов и сохраняет текущее состояние сетки.

В плавающем режиме вызов compact() гарантирует отсутствие пустых промежутков:

grid.compact();

Плавающий режим и анимации

Для улучшения визуального восприятия движения виджетов рекомендуется использовать CSS-анимацию при смене позиции. Gridstack.js автоматически применяет классы для перемещения блоков, но можно задать свои правила:

.grid-stack-item {
  transition: all 0.2s ease-in-out;
}

Это делает процесс «плавания» элементов более естественным и динамичным.

Ограничения и особенности

  1. Высота контейнера — при плавающем режиме контейнер может динамически расширяться вверх или вниз, поэтому рекомендуется контролировать высоту родительского элемента.
  2. Сложные сетки — при большом количестве мелких виджетов плавающий режим может создавать визуальный «эффект перетасовки», если не использовать cellHeight и фиксированные размеры элементов.
  3. Совместимость с drag&resize — плавающий режим полностью поддерживает изменения размеров виджетов, но стоит учитывать, что увеличенный блок может вытеснять соседние вверх.

Применение на практике

Плавающий режим особенно полезен для:

  • Dashboards с динамическими виджетами, где порядок блоков не фиксирован.
  • Визуальных редакторов контента, где блоки добавляются и удаляются часто.
  • Адаптивных интерфейсов, где важно использовать всё доступное пространство без пустых областей.

Итоговые рекомендации по использованию

  • Всегда устанавливать float: true при инициализации сетки, если требуется свободное перемещение блоков.
  • Использовать compact() после массовых изменений для оптимизации расположения.
  • Настраивать CSS-анимации для плавного визуального эффекта.
  • Контролировать размеры виджетов и сетки, чтобы избежать неожиданных смещений.

Плавающий режим Gridstack.js превращает статичную сетку в динамичную и адаптивную структуру, позволяя автоматически оптимизировать пространство при изменении контента.

Оглавление