Инициализация через JavaScript

Gridstack.js предоставляет мощный инструмент для создания интерактивных сеточных интерфейсов с поддержкой перетаскивания и изменения размеров элементов. Основной механизм работы строится на привязке HTML-структуры к объекту GridStack, который управляет положением и поведением виджетов. Инициализация через JavaScript позволяет гибко настраивать сетку и её элементы без необходимости зависеть от HTML-атрибутов.

Создание экземпляра GridStack

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

const grid = GridStack.init({
    // Настройки сетки
    column: 12,          // Количество колонок
    cellHeight: 80,      // Высота ячейки в пикселях
    verticalMargin: 10,  // Отступы между виджетами
    float: false         // Если true — элементы могут свободно перемещаться по вертикали
});

Ключевые параметры и их назначение:

  • column — задает число колонок в сетке, влияет на масштабирование элементов.
  • cellHeight — фиксирует высоту каждой ячейки. Можно использовать функцию для динамического расчета.
  • verticalMargin — отступы между виджетами по вертикали.
  • float — определяет поведение виджетов при перемещении: если true, элементы не будут автоматически “выталкиваться” вниз.

Инициализация с уже существующими элементами

Если HTML-разметка содержит готовые блоки с классом grid-stack-item, Gridstack.js автоматически интегрирует их:

const grid = GridStack.init({
    staticGrid: false
});

grid.load([
    {x:0, y:0, w:3, h:2, content: 'Элемент 1'},
    {x:3, y:0, w:3, h:2, content: 'Элемент 2'}
]);

Здесь x и y — координаты в сетке, w и h — ширина и высота элемента в ячейках, а content — HTML-содержимое. Метод load() позволяет динамически добавлять элементы при инициализации.

Настройка поведения виджетов

Gridstack.js предоставляет множество параметров для управления интерактивностью:

const grid = GridStack.init({
    disableResize: false,  // Отключает возможность изменения размера
    disableDrag: false,    // Отключает перетаскивание
    draggable: {
        handle: '.grid-stack-item-content' // Указывает область для перетаскивания
    },
    resizable: {
        handles: 'all'      // Включает изменение размера со всех сторон
    }
});
  • disableResize и disableDrag позволяют заблокировать отдельные функции сетки.
  • draggable.handle указывает, какая часть виджета будет использоваться для перетаскивания.
  • resizable.handles задает стороны виджета, с которых разрешено изменение размера.

Добавление и удаление элементов динамически

После инициализации можно управлять элементами сетки через API:

// Добавление нового элемента
grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">Новый элемент</div></div>', {
    x: 0, y: 0, w: 2, h: 2
});

// Удаление элемента
const item = document.querySelector('.grid-stack-item');
grid.removeWidget(item);

Метод addWidget принимает как HTML-строку, так и DOM-элемент. Параметры x, y, w, h задают положение и размеры в ячейках.

Обновление свойств элементов

После добавления элементов их свойства можно менять динамически:

const widget = grid.getGridItems()[0]; // Получение первого элемента
grid.update(widget, {w: 4, h: 3});     // Изменение размера
grid.move(widget, 1, 2);               // Перемещение на новые координаты

Методы update() и move() обеспечивают полное управление сеткой без необходимости перерисовки всей структуры.

Использование опций по умолчанию и кастомизация

Gridstack.js позволяет задавать глобальные настройки через объект GridStack.defaults:

GridStack.defaults.column = 12;
GridStack.defaults.cellHeight = 100;
GridStack.defaults.verticalMargin = 5;

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

События и обратные вызовы

Инициализированная сетка может реагировать на действия пользователя:

grid.on('change', function(event, items) {
    console.log('Изменены элементы:', items);
});

grid.on('added', function(event, items) {
    console.log('Добавлены новые виджеты:', items);
});

События change, added, removed и dropped позволяют отслеживать любые изменения в сетке и синхронизировать данные с сервером или локальным хранилищем.

Инициализация нескольких сеток на странице

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

const grid1 = GridStack.init({column: 6}, '#grid1');
const grid2 = GridStack.init({column: 12}, '#grid2');

Каждый объект GridStack управляет своей DOM-структурой, что обеспечивает независимое поведение и настройку каждой сетки.

Применение CSS-переменных и адаптивной сетки

Gridstack.js поддерживает адаптивные сетки через CSS-переменные:

const grid = GridStack.init({
    column: 12,
    cellHeight: 'auto',  // Автоматическая высота ячеек
    minRow: 1
});

Использование 'auto' позволяет сетке подстраиваться под контент, сохраняя гибкость дизайна и улучшая визуальное восприятие интерфейса.

Инициализация через JavaScript предоставляет полный контроль над сеткой и её виджетами, включая добавление, удаление, перемещение, изменение размеров и настройку событий. Такой подход позволяет создавать динамичные и адаптивные интерфейсы без жесткой зависимости от HTML-структуры и атрибутов.

Оглавление