Вертикальный компактный режим

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

Основные концепции вертикальной компактности

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

Основные принципы работы:

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

  2. Не влияет на горизонтальное расположение Вертикальная компактность работает только по оси Y. X-позиции виджетов сохраняются без изменений, что позволяет создавать гибкие макеты с фиксированными колонками и динамической высотой.

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

Настройка вертикальной компактности

Вертикальный компактный режим включается через опции при инициализации сетки:

const grid = GridStack.init({
    verticalCompact: true,
    column: 12,
    float: false,
});

Описание опций:

  • verticalCompact: true — активирует вертикальное подтягивание элементов.
  • float: false — предотвращает “плавающее” поведение виджетов, что важно для корректного вертикального выравнивания.
  • column — количество колонок в сетке; используется для определения X-координат виджетов.

Динамическое управление режимом

Gridstack позволяет изменять режим работы сетки после инициализации. Для включения или отключения вертикальной компактности используется метод setOptions:

grid.setOptions({ verticalCompact: false }); // отключение вертикального подтягивания
grid.setOptions({ verticalCompact: true });  // включение снова

После изменения опций необходимо пересчитать позиции виджетов с помощью метода compact:

grid.compact();

Это особенно полезно при динамическом добавлении или удалении элементов в реальном времени.

Влияние на добавление новых виджетов

При добавлении нового элемента с помощью метода addWidget вертикальная компактность автоматически учитывается:

grid.addWidget({
    x: 0,
    y: 5,
    width: 3,
    height: 2,
    content: '<div class="widget">Новый элемент</div>'
});

Если verticalCompact включён, Gridstack пересчитает Y-позиции виджетов и подтянет новые элементы вверх до ближайшего возможного места.

Особенности при сложных макетах

  1. Многоколоночные сетки Вертикальная компактность работает независимо для каждой колонки. Виджеты подтягиваются вверх только в пределах своей колонки, сохраняя горизонтальный порядок.

  2. Элементы с разной высотой Gridstack корректно обрабатывает виджеты с различной высотой, предотвращая перекрытия и обеспечивая плотное вертикальное расположение.

  3. Удаление виджетов После удаления элемента соседние виджеты автоматически подтягиваются вверх, исключая пустые строки.

const widget = grid.getWidget(el);
grid.removeWidget(widget);
grid.compact();

Практические рекомендации

  • Для стабильной работы вертикальной компактности рекомендуется использовать фиксированное количество колонок (column) и отключить плавающее поведение (float: false).
  • Для сложных макетов с динамическим добавлением и удалением элементов следует вызывать grid.compact() после каждого изменения, чтобы избежать временных пустот.
  • Комбинируя вертикальную компактность с resizable и draggable элементами, можно создавать максимально плотные и адаптивные интерфейсы без необходимости ручного контроля позиции каждого виджета.

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

Оглавление