Что такое Gridstack.js

Gridstack.js — это мощная библиотека для создания динамических сеточных интерфейсов на JavaScript. Она позволяет организовать драггируемые и ресайзируемые виджеты внутри сетки, которая автоматически подстраивается под изменения элементов и размера контейнера. Библиотека построена поверх стандартного HTML/CSS и полностью управляется через JavaScript, обеспечивая гибкость в разработке интерфейсов с интерактивными панелями.

Структура сетки

Сетку в Gridstack.js формируют контейнер и виджеты:

  • Контейнер (grid) — это основной элемент, который хранит все виджеты. Обычно реализуется через <div> с классом grid-stack.
  • Виджет (widget) — отдельная панель внутри сетки, которую можно перемещать и изменять её размеры. Виджет обозначается как <div class="grid-stack-item">.

Каждый виджет содержит элемент контента внутри <div class="grid-stack-item-content">, где размещается пользовательский контент: текст, графики, таблицы и прочее.

Инициализация сетки

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

const grid = GridStack.init({
    column: 12,
    float: true,
    cellHeight: 100,
    margin: 10,
});

Ключевые параметры:

  • column — количество колонок в сетке.
  • float — разрешает виджетам свободно «плавать», занимая доступное пространство.
  • cellHeight — высота одной ячейки сетки в пикселях.
  • margin — отступ между виджетами.

Добавление и управление виджетами

Виджеты можно добавлять как статически через HTML, так и динамически через JS.

Статическое добавление:

<div class="grid-stack">
  <div class="grid-stack-item" gs-x="0" gs-y="0" gs-width="3" gs-height="2">
    <div class="grid-stack-item-content">Виджет 1</div>
  </div>
  <div class="grid-stack-item" gs-x="3" gs-y="0" gs-width="3" gs-height="2">
    <div class="grid-stack-item-content">Виджет 2</div>
  </div>
</div>

Динамическое добавление через JS:

grid.addWidget({
    x: 0,
    y: 2,
    width: 4,
    height: 2,
    content: '<div class="grid-stack-item-content">Новый виджет</div>'
});

Параметры виджета:

  • x, y — координаты виджета в сетке.
  • width, height — размеры в ячейках.
  • content — HTML-контент внутри виджета.

Перетаскивание и ресайз

Gridstack.js обеспечивает drag & drop и resizable функционал из коробки:

  • draggable — виджеты можно перемещать.
  • resizable — виджеты можно изменять по размеру.

Пример включения:

GridStack.init({
    draggable: {
        handle: '.grid-stack-item-content'
    },
    resizable: {
        handles: 'e, se, s, sw, w'
    }
});

handle определяет область, за которую можно перетаскивать виджет. Опция handles задаёт стороны для изменения размера.

События

Gridstack.js поддерживает обширный набор событий, которые позволяют отслеживать действия пользователя:

  • change — триггерится при изменении положения или размера виджета.
  • added — вызывается после добавления виджета.
  • removed — вызывается после удаления виджета.
  • dragstart, dragstop — начало и окончание перетаскивания.
  • resizestart, resizestop — начало и окончание изменения размера.

Пример подписки на событие:

grid.on('change', function(event, items) {
    console.log('Изменились виджеты:', items);
});

Адаптивность и мобильные устройства

Gridstack.js автоматически поддерживает адаптивность:

  • Сетка перестраивается при изменении ширины контейнера.
  • Виджеты сохраняют пропорции и порядок.
  • Возможна настройка breakpoints для изменения количества колонок на разных разрешениях экрана.
GridStack.init({
    column: 12,
    breakpoints: {
        xs: 1,
        sm: 4,
        md: 8,
        lg: 12
    }
});

Работа с данными

Gridstack.js позволяет сохранять состояние сетки и восстанавливать его:

  • save() — возвращает массив объектов с координатами и размерами виджетов.
  • load() — загружает состояние из массива.

Пример:

const serialized = grid.save();
grid.load(serialized);

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

Настройка внешнего вида

  • Стили виджетов и сетки можно изменять через CSS.
  • Класс .grid-stack-item-content обычно задают для внутреннего контента виджета.
  • Сетка поддерживает gap между элементами, тени, бордеры и другие декоративные свойства.
.grid-stack-item-content {
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Интеграция с другими библиотеками

Gridstack.js легко интегрируется с React, Vue и Angular, обеспечивая компонентный подход:

  • Для React существует <GridStack> компонент, который оборачивает сетку и позволяет управлять виджетами через состояние.
  • Для Vue и Angular доступны соответствующие обёртки и директивы.

Использование с фреймворками делает Gridstack.js удобным для построения панелей управления, дашбордов и интерактивных интерфейсов в современных SPA-приложениях.

Производительность

Gridstack.js оптимизирован для больших сеток:

  • Поддержка lazy rendering при необходимости.
  • Минимальное использование DOM-операций при перетаскивании и ресайзе.
  • Возможность отключать анимации для улучшения производительности.

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

Оглавление