Методы работы с элементами

Для работы с элементами в Gridstack.js сначала необходимо создать контейнер сетки и инициализировать его. Контейнер определяется через обычный HTML-элемент, например div, с классом grid-stack. После этого подключается метод .gridstack() для превращения контейнера в рабочую сетку.

const grid = GridStack.init({
  column: 12,
  float: true,
  animate: true
});

Параметры инициализации:

  • column — количество колонок в сетке.
  • float — разрешает свободное перемещение элементов по вертикали.
  • animate — включает анимацию при перемещении и изменении размеров элементов.

Создание нового элемента происходит с помощью метода addWidget. Он принимает объект с настройками позиции и размеров:

grid.addWidget({
  x: 0,
  y: 0,
  width: 4,
  height: 2,
  content: '<div class="grid-stack-item-content">Элемент</div>'
});

Ключевые свойства:

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

Получение и модификация элементов

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

const widgets = grid.getGridItems();
widgets.forEach(widget => {
  const node = widget.gridstackNode;
  console.log(`Элемент на позиции x: ${node.x}, y: ${node.y}`);
});

Основные методы для работы с элементами:

  • getGridItems() — возвращает массив всех элементов сетки.
  • update(widget, options) — обновляет параметры элемента. Пример:
grid.update(widget, {width: 6, height: 3});
  • move(widget, x, y) — перемещает элемент в указанные координаты.
  • resize(widget, width, height) — изменяет размеры элемента.
  • removeWidget(widget) — удаляет элемент из сетки.

События элементов

Gridstack.js предоставляет богатый набор событий для отслеживания действий с элементами.

Основные события:

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

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

grid.on('change', (event, items) => {
  items.forEach(item => {
    console.log(`Элемент ${item.id} изменен: x=${item.x}, y=${item.y}`);
  });
});

Программное управление классами и стилями

Каждому элементу можно назначать CSS-классы и стили как при создании, так и динамически после добавления:

widget.el.classList.add('highlight');
widget.el.style.backgroundColor = '#f0f0f0';

Методы для работы с классами и стилями:

  • el.classList.add/remove/toggle() — управление классами элемента.
  • el.style — управление inline-стилями элемента.

Сохраняем и восстанавливаем состояние сетки

Gridstack.js позволяет сохранять текущее состояние элементов и восстанавливать его позднее. Для этого используется сериализация:

const serialized = grid.save();
console.log(serialized);

Для восстановления состояния:

grid.load(serialized);

Преимущества сериализации:

  • Перемещение элементов сохраняется при перезагрузке страницы.
  • Возможность динамически менять раскладку сетки на основе сохраненных данных.
  • Поддержка обмена конфигурациями между пользователями.

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

Добавление элементов может происходить не только при инициализации, но и в любой момент работы приложения:

const newWidget = grid.addWidget({
  x: 2,
  y: 1,
  width: 3,
  height: 2,
  content: '<div class="grid-stack-item-content">Новый элемент</div>'
});

Удаление элемента по ссылке на его DOM-элемент:

grid.removeWidget(newWidget.el);

Использование методов addWidget и removeWidget совместно с событиями позволяет создавать динамичные интерфейсы, где элементы могут появляться, исчезать и изменять размеры в реальном времени.

Итерация по элементам и поиск по критериям

Для получения конкретного элемента можно использовать методы поиска или фильтрации:

const widget = grid.engine.nodes.find(node => node.id === 'my-widget');
grid.update(widget.el, {width: 5, height: 2});

Практические сценарии:

  • Изменение размеров всех элементов одного типа.
  • Перемещение элементов в определенную колонку.
  • Применение стилей к элементам, соответствующим заданным условиям.

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

Оглавление