Блокировка элементов

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

В Gridstack.js блокировка элементов осуществляется через свойства locked, noMove и noResize. Разберём каждый из них детально.

Свойство locked

Свойство locked — это основной способ полной блокировки элемента. Если установить locked: true, элемент становится неперетаскиваемым и неизменяемым по размеру.

const grid = GridStack.init();
grid.addWidget({
  x: 0, y: 0, width: 3, height: 2,
  content: '<div>Блокированный виджет</div>',
  locked: true
});

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

  • locked: true одновременно блокирует перетаскивание и масштабирование.
  • Свойство можно изменить динамически после добавления виджета через метод update():
const widget = grid.getWidget(0);
grid.update(widget, { locked: false }); // Снимает блокировку

Свойство noMove

Свойство noMove позволяет запретить только перемещение элемента, оставив возможность менять его размеры. Это удобно, если требуется зафиксировать позицию виджета, но разрешить пользователю менять его размер по горизонтали или вертикали.

grid.addWidget({
  x: 1, y: 1, width: 2, height: 2,
  content: '<div>Только изменение размера</div>',
  noMove: true
});

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

Свойство noResize

Свойство noResize блокирует возможность изменения размеров элемента, но оставляет его перемещаемым. Это полезно для элементов, которые должны оставаться фиксированного размера, например, графики или видео.

grid.addWidget({
  x: 2, y: 2, width: 4, height: 2,
  content: '<div>Фиксированный размер</div>',
  noResize: true
});

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

  • Можно использовать совместно с noMove, чтобы полностью заблокировать элемент.
  • Если locked равен true, noMove и noResize игнорируются, так как полная блокировка перекрывает частичные настройки.

Динамическая блокировка и разблокировка

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

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

const widget = grid.getWidget(0);

// Заблокировать
grid.update(widget, { locked: true });

// Разблокировать
grid.update(widget, { locked: false });

// Только запрет перемещения
grid.update(widget, { noMove: true });

// Только запрет изменения размера
grid.update(widget, { noResize: true });

Комбинация свойств блокировки

С помощью комбинаций noMove и noResize можно создавать гибкие ограничения:

Свойство Эффект
noMove: true Заблокировано перемещение, можно изменять размер
noResize: true Можно перемещать, размер фиксирован
noMove: true, noResize: true Полная блокировка без использования locked
locked: true Полная блокировка с приоритетом над noMove и noResize

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

Обработка блокировки на событиях

Gridstack.js позволяет отслеживать события drag и resize, что полезно для ограничения действий в зависимости от состояния виджета.

grid.on('dragstart', function(event, el) {
  const node = el.gridstackNode;
  if (node.locked) {
    event.preventDefault(); // Предотвращает перемещение заблокированного виджета
  }
});

grid.on('resizestart', function(event, el) {
  const node = el.gridstackNode;
  if (node.noResize) {
    event.preventDefault(); // Предотвращает изменение размера
  }
});

Такой подход позволяет дополнительно контролировать поведение элементов и внедрять кастомные правила блокировки.

Итоговые рекомендации по блокировке

  • Для полной блокировки используйте locked: true.
  • Для частичной блокировки выбирайте комбинацию noMove и noResize.
  • Динамическая блокировка через update() позволяет менять состояние виджетов в зависимости от логики приложения.
  • Для сложных сценариев используйте события dragstart и resizestart для дополнительного контроля.

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

Оглавление