Методы блокировки и разблокировки

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

Блокировка отдельного виджета

Каждый элемент сетки (widget) в Gridstack.js может быть заблокирован с помощью метода disable() или через опции locked и static.

Пример через метод:

const grid = GridStack.init();
const widget = grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">Элемент</div></div>');

// Блокировка виджета: запрет на перемещение и изменение размера
grid.disable(widget);

После вызова disable() виджет не может быть перемещён или изменён по размеру пользователем. Этот метод часто используется, когда нужно временно запретить действия над конкретным элементом сетки.

Использование свойства locked

Свойство locked задаётся при создании виджета или динамически через метод update():

grid.addWidget(
  '<div class="grid-stack-item"><div class="grid-stack-item-content">Блокированный элемент</div></div>', 
  { x: 0, y: 0, width: 2, height: 2, locked: true }
);

// Динамическая блокировка
const widgetNode = grid.getCellFromPixel({x: 0, y: 0});
grid.update(widgetNode, { locked: true });

Особенности:

  • locked: true блокирует и перемещение, и изменение размера виджета.
  • В отличие от disable(), locked можно использовать при инициализации, что удобно для статичных панелей.

Статические элементы с static

Иногда требуется полностью зафиксировать элемент, чтобы он не реагировал на любые события сетки:

grid.addWidget(
  '<div class="grid-stack-item"><div class="grid-stack-item-content">Статический элемент</div></div>', 
  { static: true }
);

Разница между locked и static:

  • locked позволяет сетке продолжать пересчёт ячеек вокруг элемента.
  • static делает элемент неподвижным, и сетка больше не учитывает его при перестройке соседних элементов.

Разблокировка виджетов

Для снятия блокировки используется метод enable() или обновление свойства locked:

// Разблокировка через метод
grid.enable(widget);

// Динамическая разблокировка через update
grid.update(widgetNode, { locked: false });

После вызова этих методов виджет снова можно перемещать и менять размер, сетка реагирует на изменения положения и пересчёт ячеек.

Блокировка всех виджетов сетки

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

// Блокировка всей сетки
grid.disable();

// Разблокировка всей сетки
grid.enable();

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

Ограничение только перемещения или изменения размера

Gridstack.js поддерживает точечное ограничение действий через свойства movable и resizable:

grid.addWidget(
  '<div class="grid-stack-item"><div class="grid-stack-item-content">Частично заблокированный</div></div>',
  { x: 0, y: 0, width: 2, height: 2, movable: false, resizable: true }
);
  • movable: false — виджет нельзя перемещать, но можно менять размер.
  • resizable: false — виджет нельзя менять по размеру, но можно перемещать.

Динамически можно обновлять эти параметры через метод update():

grid.update(widgetNode, { movable: true, resizable: false });

Взаимодействие блокировки с событиями

Блокировка виджета влияет на все события Gridstack.js, связанные с перемещением (drag) и изменением размера (resize). Даже если обработчики событий подключены, заблокированный элемент не будет реагировать на попытки пользователя.

Для проверки состояния виджета можно использовать метод:

const isLocked = grid.isAreaEmpty(widgetNode); // неявно проверяет состояние сетки

Резюме по методам блокировки

Метод/Свойство Действие Подвижность Изменение размера Учет сетки
disable() Блокировка через API Нет Нет Да
enable() Разблокировка Да Да Да
locked: true Инициализация или update Нет Нет Да
static: true Полная фиксация Нет Нет Нет
movable/resizable Частичная блокировка Ограничено Ограничено Да

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

Оглавление