Атрибуты элементов

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

Позиционирование элементов

1. gs-x и gs-y Определяют координаты верхнего левого угла виджета относительно сетки:

<div class="grid-stack-item" gs-x="0" gs-y="0"></div>
  • gs-x — горизонтальная координата (столбец).
  • gs-y — вертикальная координата (строка).

Значения начинаются с 0. Если элемент перемещается вручную, Gridstack автоматически обновляет эти атрибуты.

Размеры виджетов

2. gs-width и gs-height Определяют количество ячеек, которое занимает элемент по ширине и высоте:

<div class="grid-stack-item" gs-width="2" gs-height="3"></div>
  • gs-width — количество столбцов, занимаемых элементом.
  • gs-height — количество строк, занимаемых элементом.

Эти значения могут быть изменены программно через методы resize или update.

Идентификация и уникальность

3. id и data-gs-id Для работы с конкретными элементами удобно использовать уникальные идентификаторы:

<div class="grid-stack-item" data-gs-id="widget-1"></div>
  • data-gs-id позволяет Gridstack.js отслеживать элемент при динамическом обновлении сетки.
  • id стандартный HTML-атрибут, используемый для привязки событий и стилей.

Использование data-gs-id особенно важно при загрузке сохранённой конфигурации сетки.

Ограничения на размеры

4. gs-min-width, gs-max-width, gs-min-height, gs-max-height

<div class="grid-stack-item" gs-min-width="1" gs-max-width="4" gs-min-height="1" gs-max-height="5"></div>

Эти атрибуты ограничивают размеры виджета:

  • Минимальные (gs-min-*) и максимальные (gs-max-*) значения предотвращают чрезмерное растягивание или сжатие элемента.
  • Используются при включенном ресайзе и позволяют задать адаптивность без вмешательства в код.

Блокировка перемещения и изменения размеров

5. gs-no-resize и gs-no-move

<div class="grid-stack-item" gs-no-resize gs-no-move></div>
  • gs-no-resize запрещает пользователю менять размеры виджета.
  • gs-no-move запрещает перемещение элемента по сетке.

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

Поведение при наложении и автоматическом перемещении

6. gs-auto-position

<div class="grid-stack-item" gs-auto-position></div>
  • Gridstack автоматически подбирает координаты gs-x и gs-y для элемента, если они не заданы.
  • Полезно для динамического добавления виджетов без необходимости вычислять позиции вручную.

Индексация слоя (z-index)

7. gs-z-index

<div class="grid-stack-item" gs-z-index="10"></div>
  • Определяет порядок отображения элементов при наложении.
  • Higher values отображаются поверх элементов с меньшим значением.
  • Часто используется совместно с drag&drop для визуального эффекта перемещения.

Программное обновление атрибутов

Gridstack.js предоставляет методы для работы с атрибутами элементов динамически:

const grid = GridStack.init();
const el = document.querySelector('.grid-stack-item');

// Обновление позиции
grid.update(el, {x: 2, y: 3});

// Обновление размера
grid.update(el, {width: 4, height: 2});

// Блокировка перемещения
el.setAttribute('gs-no-move', '');

Метод update принимает объект с любыми ключами атрибутов, что позволяет синхронизировать состояние сетки с данными приложения.

Резервные атрибуты для кастомизации

  • gs-id — альтернативный идентификатор для интеграций.
  • gs-movable и gs-resizable — могут использоваться для динамического изменения поведения без удаления атрибутов gs-no-move/gs-no-resize.
  • gs-margin — задаёт внутренние отступы виджета, если включён параметр margin в Gridstack.

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

Итоговая схема атрибутов

Атрибут Назначение Пример
gs-x, gs-y Позиция элемента gs-x="0" gs-y="1"
gs-width, gs-height Размер в ячейках gs-width="3" gs-height="2"
gs-min-width, gs-max-width Ограничения ширины gs-min-width="1" gs-max-width="4"
gs-min-height, gs-max-height Ограничения высоты gs-min-height="1" gs-max-height="5"
gs-no-move Запрет перемещения gs-no-move
gs-no-resize Запрет изменения размеров gs-no-resize
gs-auto-position Авторазмещение gs-auto-position
gs-z-index Порядок наложения gs-z-index="10"
data-gs-id Уникальный идентификатор data-gs-id="widget-1"

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

Оглавление