Перемещение между сетками

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

Инициализация нескольких сеток

Для начала необходимо создать несколько контейнеров сеток в HTML и инициализировать их через Gridstack:

<div class="grid grid-1"></div>
<div class="grid grid-2"></div>
const grid1 = GridStack.init({
    column: 12,
    float: true,
    acceptWidgets: true
}, '.grid-1');

const grid2 = GridStack.init({
    column: 12,
    float: true,
    acceptWidgets: true
}, '.grid-2');

Ключевые моменты:

  • acceptWidgets: true — разрешает сетке принимать элементы, перемещаемые из других сеток.
  • float: true — позволяет элементам “плавать” при перемещении, чтобы избежать конфликта координат.

Разрешение перемещения виджетов между сетками

Чтобы виджеты могли свободно перемещаться между сетками, необходимо подключить drag-and-drop функциональность Gridstack. Для этого используется dragIn и dragOut события, а также метод makeWidget:

// Подготовка виджетов для переноса
grid1.enableMove(true);
grid2.enableMove(true);

// Обработчик события добавления виджета в другую сетку
grid2.on('added', function(event, items) {
    console.log('В grid2 добавлен виджет:', items);
});
  • enableMove(true) активирует возможность перемещения виджетов.
  • Событие added позволяет отслеживать, когда виджет был успешно добавлен в новую сетку.

Создание динамически переносимых виджетов

В Gridstack виджеты можно добавлять динамически через Jav * aScript:

grid1.addWidget({
    x: 0,
    y: 0,
    w: 3,
    h: 2,
    content: '<div class="grid-stack-item-content">Виджет 1</div>'
});

grid2.addWidget({
    x: 0,
    y: 0,
    w: 4,
    h: 2,
    content: '<div class="grid-stack-item-content">Виджет 2</div>'
});
  • Каждый виджет получает координаты x, y и размеры w, h.
  • Использование content позволяет вставлять произвольный HTML внутрь виджета.

Настройка перетаскивания между сетками через jQuery UI

Gridstack.js базируется на jQuery UI draggable/droppable, что позволяет перемещать виджеты между контейнерами:

$('.grid-stack').on('dragstart', '.grid-stack-item', function(event, ui) {
    $(this).data('originGrid', $(this).closest('.grid-stack'));
});

$('.grid-stack').on('drop', function(event, ui) {
    const originGrid = ui.helper.data('originGrid')[0].gridstack;
    const targetGrid = $(this)[0].gridstack;
    
    const widget = ui.helper[0].gridstackNode;
    
    originGrid.removeWidget(ui.helper);
    targetGrid.addWidget(ui.helper, {autoPosition: true});
});

Пояснения:

  • data('originGrid') хранит ссылку на исходную сетку.
  • При событии drop виджет удаляется из исходной сетки и добавляется в целевую.
  • autoPosition: true позволяет Gridstack автоматически размещать виджет в первой свободной ячейке.

Синхронизация состояний между сетками

Для сохранения текущего расположения виджетов рекомендуется использовать метод save() и load():

// Сохранение состояния сетки
const grid1State = grid1.save();
const grid2State = grid2.save();

// Восстановление состояния
grid1.load(grid1State);
grid2.load(grid2State);

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

Особенности и подводные камни

  1. Совместимость размеров: Виджет может иметь ширину больше, чем свободное место в целевой сетке. В таких случаях рекомендуется включать autoPosition или адаптировать размеры при переносе.
  2. События Gridstack: added, removed, change — важны для отслеживания перемещений.
  3. Перетаскивание динамических элементов: Если виджеты создаются динамически после инициализации, нужно использовать makeWidget для правильной активации drag-and-drop.

Пример сложного перемещения

grid1.on('change', function(event, items) {
    items.forEach(function(node) {
        if(node.y > 10) { // условие переноса
            grid1.removeWidget(node.el);
            grid2.addWidget(node.el);
        }
    });
});
  • Позволяет автоматически переносить виджеты между сетками на основе координат или других условий.
  • Использование событий change и методов removeWidget/addWidget обеспечивает плавное перемещение без потери состояния.

Эти техники позволяют создавать динамичные дашборды, где элементы могут свободно перемещаться между разными областями интерфейса, сохраняя адаптивность и управляемость. Gridstack.js сочетает простоту API с гибкостью drag-and-drop, что делает работу с несколькими сетками интуитивной и предсказуемой.

Оглавление