Отключение функционала на малых экранах

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

Отключение перетаскивания и изменения размера

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

const grid = GridStack.init({
  draggable: {
    handle: '.grid-stack-item-content',
    enabled: window.innerWidth > 768 // только на экранах шире 768px
  },
  resizable: {
    handles: 'all',
    enabled: window.innerWidth > 768
  }
});
  • draggable.enabled — включает или выключает возможность перемещения блоков.
  • resizable.enabled — контролирует возможность изменения размера блоков.
  • Использование условия window.innerWidth > 768 позволяет автоматически отключать интерактивные возможности на смартфонах и небольших планшетах.

Динамическое изменение опций при изменении размера окна

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

window.addEventListener('resize', () => {
  const enableInteraction = window.innerWidth > 768;

  grid.enableMove(enableInteraction);
  grid.enableResize(enableInteraction);
});
  • grid.enableMove(true|false) — активирует или деактивирует перетаскивание.
  • grid.enableResize(true|false) — активирует или деактивирует изменение размера.
  • Подход с обработчиком resize обеспечивает плавную адаптацию без перезагрузки страницы.

Использование CSS-классов для адаптивного поведения

Для отключения определённых функций можно использовать CSS вместе с Gridstack.js. Например, блоки можно сделать неперетаскиваемыми на мобильных устройствах, используя класс .no-drag:

@media (max-width: 768px) {
  .grid-stack-item.no-drag {
    pointer-events: none;
  }
}

Затем при инициализации Gridstack.js блоки с этим классом будут исключены из интерактивных операций:

grid.makeStatic(true); // перевод всех блоков в статический режим
  • makeStatic(true) — делает все элементы статичными, отключая drag & drop и ресайз.
  • Можно применять только к части элементов через выборку: grid.getGridItems().forEach(item => { ... });

Управление поведением отдельных виджетов

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

const item = document.querySelector('.grid-stack-item');
grid.update(item, { noMove: window.innerWidth <= 768, noResize: window.innerWidth <= 768 });
  • noMove — блок не может перемещаться.
  • noResize — блок не может изменять размер.
  • Это позволяет оставлять ключевые элементы интерактивными даже на маленьких экранах, а второстепенные — статичными.

Автоматическое масштабирование и перестройка сетки

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

if (window.innerWidth <= 480) {
  grid.compact(); // уплотнение сетки без изменения структуры блоков
  grid.disable(); // полностью отключает интерактивность
} else {
  grid.enable(); // восстановление интерактивности на больших экранах
}
  • compact() — автоматически перестраивает сетку, минимизируя пустое пространство.
  • disable() и enable() — управляют глобальным режимом сетки.
  • Такой подход оптимизирует отображение на смартфонах без потери содержимого.

Подводные моменты и рекомендации

  • Переменные window.innerWidth и window.matchMedia можно использовать для создания breakpoint-логики, аналогичной CSS.
  • После отключения интерактивности через makeStatic или disable события drag & drop больше не вызываются. Для восстановления интерактивности необходимо использовать соответствующие методы enable, enableMove, enableResize.
  • Для сеток с большим количеством блоков рекомендуется отключать ресайз на мобильных устройствах во избежание лагов и неправильного рендеринга.
  • Комбинация CSS и методов Gridstack.js позволяет создавать гибкую адаптивную сетку без необходимости дублирования кода для разных устройств.

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

Оглавление