Полный список опций инициализации

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

column

Определяет количество колонок в сетке. Значение по умолчанию — 12.

const grid = GridStack.init({ column: 6 });
  • Тип: number
  • Влияет на: ширину колонок, поведение перетаскивания и ресайз элементов.

cellHeight и cellHeightUnit

Задают высоту ячеек сетки.

  • cellHeight: числовое значение высоты ячейки (по умолчанию 60).
  • cellHeightUnit: единицы измерения, строка (px или %).
  • Можно использовать auto, чтобы высота ячейки автоматически подстраивалась под содержимое.
GridStack.init({ cellHeight: 80, cellHeightUnit: 'px' });

verticalMargin

Определяет вертикальный отступ между элементами.

  • Тип: number или строка с единицами (px, %).
  • Значение по умолчанию: 10.
  • Позволяет управлять визуальной плотностью сетки.

float

Опция включает или выключает плавающее поведение элементов.

  • Тип: boolean
  • По умолчанию: false
  • Если true, элементы не выталкиваются вниз другими элементами, а могут занимать пустые промежутки сверху.
GridStack.init({ float: true });

disableOneColumnMode

Контролирует поведение сетки при сужении окна до одноколоночного режима.

  • Тип: boolean
  • По умолчанию: false
  • Если true, сетка никогда не переходит в одноколоночный режим, полезно для управления адаптивной версткой вручную.

disableResize и disableDrag

Управляют возможностью изменения размеров и перетаскивания элементов.

  • disableResize: отключает возможность изменения размеров для всех элементов.
  • disableDrag: отключает перетаскивание.
  • Тип: boolean
GridStack.init({ disableResize: true, disableDrag: false });

handle и handleClass

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

  • handle: CSS-селектор, указывающий на элемент внутри виджета, которым можно перетаскивать.
  • handleClass: CSS-класс, который можно добавить к виджету для захвата.
GridStack.init({ handle: '.grid-stack-item-header' });

acceptWidgets

Позволяет сетке принимать новые виджеты, перетаскиваемые извне.

  • Тип: boolean
  • По умолчанию: false
  • Совместимо с Drag & Drop библиотеками (например, jQuery UI Draggable).

alwaysShowResizeHandle

Опция управления видимостью маркера изменения размеров.

  • Тип: boolean
  • Если true, маркеры всегда видны, даже без наведения мыши.
  • Полезно для интерфейсов с активным редактированием сетки.

animate

Включает плавную анимацию при перемещении и изменении размеров элементов.

  • Тип: boolean
  • По умолчанию: false
  • Может влиять на производительность при больших сетках.
GridStack.init({ animate: true });

removable и removeTimeout

Управляют возможностью удаления элементов путем перетаскивания их за пределы сетки.

  • removable: включает удаление элементов (boolean).
  • removeTimeout: задержка в миллисекундах перед удалением элемента после его отпускания за пределами сетки.

minRow и maxRow

Ограничивают минимальное и максимальное количество рядов в сетке.

  • Тип: number
  • Полезно для поддержания структуры и предотвращения слишком растянутых сеток.

resizable и draggable (объекты)

Более детальная настройка поведения элементов:

  • resizable: объект с ключами handles, autoHide, start, stop, resize.
  • draggable: объект с ключами handle, start, stop, drag.
GridStack.init({
  resizable: { handles: 'se, sw', autoHide: true },
  draggable: { handle: '.grid-stack-item-header' }
});

staticGrid

Если true, сетка становится неактивной, элементы не перетаскиваются и не ресайзятся.

  • Полезно для режима просмотра без редактирования.

columnWidth

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

  • Тип: number
  • Можно комбинировать с cellHeight для создания квадратных или пропорциональных ячеек.

nested

Позволяет создавать вложенные сетки, где один виджет может содержать собственную Gridstack-сетку.

  • Тип: boolean
  • По умолчанию: false
  • Необходимо инициализировать внутренние сетки отдельно.

alwaysShowResizeHandle

Опция управления видимостью маркера изменения размеров.

  • Тип: boolean
  • Если true, маркеры всегда видны, даже без наведения мыши.
  • Полезно для интерфейсов с активным редактированием сетки.

column и maxRow

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

Поддержка обратной совместимости и расширяемость

Gridstack.js позволяет:

  • Использовать старые версии опций (oneColumnModeClass, cellHeight строкой).
  • Добавлять собственные расширения через плагины и события (added, removed, resized, dragstart, dragstop).
  • Управлять сеткой динамически через методы: grid.addWidget(), grid.removeWidget(), grid.resize().

Эти возможности делают инициализационный объект универсальным инструментом для тонкой настройки поведения сетки.

Оглавление