Установка и подключение

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

Подключение через CDN

Наиболее простой способ начать использовать Gridstack.js — подключение через CDN. Для этого требуется подключить стили и скрипты в <head> документа или перед закрывающим тегом <body>.

<!-- CSS Gridstack -->
<link href="https://cdn.jsdelivr.net/npm/gridstack@8.2.0/dist/gridstack.min.css" rel="stylesheet"/>

<!-- JS Gridstack -->
<script src="https://cdn.jsdelivr.net/npm/gridstack@8.2.0/dist/gridstack.all.js"></script>

Особенности подключения через CDN:

  • Быстрая интеграция без установки пакетов.
  • Всегда можно использовать последнюю стабильную версию.
  • Необходим интернет для загрузки ресурсов.

Установка через npm

Для проектов, использующих Node.js и сборщики вроде Webpack, Vite или Parcel, рекомендуется установка через npm. Это позволяет интегрировать Gridstack.js в модульную систему.

npm install gridstack

После установки можно подключить библиотеку в проект:

import { GridStack } from 'gridstack';
import 'gridstack/dist/gridstack.min.css';

Преимущества npm-подхода:

  • Управление версиями через package.json.
  • Возможность сборки и минимизации скриптов.
  • Интеграция с современными фреймворками (React, Vue, Angular).

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

После подключения библиотеки необходимо создать контейнер для сетки. Обычно используется элемент <div> с классом grid-stack.

<div class="grid-stack"></div>

Инициализация происходит через Jav * aScript:

const grid = GridStack.init({
  column: 12,      // Количество колонок в сетке
  float: true,     // Разрешение свободного перемещения виджетов
  animate: true    // Анимация при перетаскивании и изменении размеров
});

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

  • column — задает количество колонок в сетке (по умолчанию 12).
  • cellHeight — высота каждой ячейки (можно задавать в пикселях или использовать auto).
  • float — позволяет элементам свободно перемещаться без ограничения сеткой.
  • animate — включает анимацию при перемещении и изменении размеров элементов.
  • disableOneColumnMode — отключает автоматический переход в мобильный режим.

Подключение с поддержкой jQuery

Gridstack.js поддерживает работу с jQuery, что позволяет использовать более старый стиль вызовов.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gridstack@8.2.0/dist/gridstack.all.js"></script>

<script>
  $(function() {
    $('.grid-stack').gridstack({
      column: 12,
      animate: true
    });
  });
</script>

Особенности использования с jQuery:

  • Позволяет работать с сеткой через привычные методы jQuery.
  • Совместимость со старыми проектами, где jQuery уже используется.
  • Поддержка большинства функций Gridstack.js идентична нативной версии.

Структура HTML виджетов

Для корректной работы сетки элементы должны иметь класс grid-stack-item, а внутренний контейнер — grid-stack-item-content.

<div class="grid-stack">
  <div class="grid-stack-item" gs-w="4" gs-h="2">
    <div class="grid-stack-item-content">
      Виджет 1
    </div>
  </div>
  <div class="grid-stack-item" gs-w="4" gs-h="2">
    <div class="grid-stack-item-content">
      Виджет 2
    </div>
  </div>
</div>

Обязательные атрибуты:

  • gs-x, gs-y — позиция элемента в сетке (по умолчанию 0,0).
  • gs-w, gs-h — ширина и высота элемента в ячейках.
  • grid-stack-item-content — контейнер, в котором размещается контент виджета.

Проверка работоспособности

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

  1. Перетаскиваются ли виджеты мышью.
  2. Изменяется ли размер виджетов.
  3. Сохраняется ли сетка при динамическом добавлении/удалении элементов.

Пример добавления нового виджета динамически:

grid.addWidget('<div class="grid-stack-item" gs-w="3" gs-h="2"><div class="grid-stack-item-content">Новый виджет</div></div>');

Поддержка адаптивности

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

GridStack.init({
  column: 12,
  cellHeight: 80,
  minRow: 1,
  disableOneColumnMode: false
});
  • disableOneColumnMode: false — включает мобильный режим, где элементы выстраиваются в одну колонку.
  • cellHeight — регулирует высоту ячеек для комфортного отображения на разных устройствах.

Таким образом, корректная установка и подключение Gridstack.js включает выбор способа интеграции (CDN или npm), подключение CSS и JS, настройку контейнера и инициализацию сетки с базовыми параметрами. Правильная структура HTML и атрибуты элементов обеспечивают стабильную работу и адаптивность интерфейса.

Оглавление