Настройка перетаскивания

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

Включение и отключение перетаскивания

Перетаскивание в Gridstack.js настраивается через параметры и методы объекта сетки. Основной параметр — draggable при инициализации сетки:

const grid = GridStack.init({
    draggable: {
        handle: '.grid-stack-item-content',
        scroll: true,
        appendTo: 'body'
    }
});
  • handle — задаёт CSS-селектор, по которому пользователь сможет захватывать элемент для перетаскивания.
  • scroll — если true, страница будет автоматически прокручиваться при движении элемента к краю окна.
  • appendTo — задаёт контейнер, в котором будет отображаться элемент во время перетаскивания. По умолчанию используется родительский контейнер.

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

grid.movable('.grid-stack-item', false);

Этот вызов делает выбранные элементы статичными, предотвращая их перемещение.

Ограничение области перемещения

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

const grid = GridStack.init({
    draggable: {
        containment: '.grid-container'
    }
});
  • containment принимает селектор контейнера или элемент DOM.
  • Если параметр не указан, элементы могут перемещаться свободно по всей странице.

Настройка «snap-to-grid» поведения

Перетаскиваемые элементы автоматически выравниваются по сетке. Размер и шаг сетки задаются параметрами cellHeight и column:

const grid = GridStack.init({
    column: 12,
    cellHeight: 80,
    draggable: {
        snap: true
    }
});
  • snap при true активирует «прилипание» элемента к ближайшей ячейке сетки.
  • cellHeight определяет высоту одной ячейки.
  • column задаёт количество колонок сетки.

Ограничение перемещения по осям

Можно ограничить движение элемента только по горизонтали или вертикали. Это делается через методы disableMove или использование опций axis:

const grid = GridStack.init({
    draggable: {
        axis: 'x' // движение только по горизонтали
    }
});
  • axis: 'y' — разрешает движение только по вертикали.
  • При значении null движение разрешено по обеим осям.

События перетаскивания

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

  • dragstart — момент начала перетаскивания.
  • drag — движение элемента по сетке в реальном времени.
  • dragstop — завершение перетаскивания.

Пример привязки обработчиков:

grid.on('dragstart', function(event, el) {
    console.log('Начало перемещения элемента', el);
});

grid.on('dragstop', function(event, el) {
    console.log('Элемент перемещён', el);
});

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

Динамическое включение и настройка

Параметры перетаскивания можно изменять после инициализации сетки. Например, изменить handle или включить/отключить snap:

grid.draggable('.grid-stack-item', true, { handle: '.custom-handle' });
grid.engine.nodes.forEach(node => node.snap = false);
grid.on('change', () => grid.commit());
  • grid.draggable() позволяет включать или отключать перетаскивание для конкретных элементов.
  • Изменение свойства snap на уровне узла (node) отключает выравнивание по сетке для отдельных элементов.

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

Gridstack.js позволяет ограничивать перемещение элементов, чтобы они не перекрывали другие виджеты. Это реализуется через параметр float и методы lock:

grid.engine.float = false; // запрет плавающих элементов
grid.movable('.grid-stack-item', true); // включение перемещения
grid.lock('.grid-stack-item', true); // блокировка изменения позиции
  • float = false — элементы занимают ближайшие доступные ячейки, предотвращая наложение.
  • lock() — позволяет заблокировать или разблокировать отдельный элемент для перемещения.

Взаимодействие с мобильными устройствами

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

grid.init({
    draggable: {
        handle: '.grid-stack-item-content',
        scroll: true,
        appendTo: 'body',
        touch: true
    }
});
  • touch: true — активирует обработку событий касания, делая перетаскивание плавным на сенсорных экранах.

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

Оглавление