Перемещение элементов между Grid

Muuri — это высокоэффективная библиотека для работы с сетки элементов (Grid) в JavaScript, которая поддерживает динамическое перемещение, сортировку и фильтрацию элементов. Одной из ключевых возможностей является перетаскивание элементов между разными сетками с сохранением анимации и состояния.

Для начала важно понять, что каждый Grid в Muuri управляет своим набором элементов и хранит их состояние отдельно. Когда требуется переместить элемент между сетками, необходимо выполнить следующие шаги:

1. Извлечение элемента из исходной сетки Метод remove позволяет удалить элемент из Grid, при этом возвращается объект элемента, который можно использовать для добавления в другой Grid:

   const removedItem = sourceGrid.getItem(element);
   sourceGrid.remove(removedItem, { removeElements: false });

   Параметр removeElements: false гарантирует, что сам DOM-элемент не будет удалён со страницы, а останется доступным для новой сетки.

2. Добавление элемента в целевую сетку Метод add целевой сетки принимает один или несколько элементов:

   targetGrid.add(removedItem.getElement());

   После добавления элемент автоматически интегрируется в структуру Grid с анимацией, если она включена.

3. Сохранение состояния и позиции элементов Для корректного отображения после перемещения полезно вызвать метод refreshItems и layout у обеих сеток:

   sourceGrid.refreshItems().layout();
   targetGrid.refreshItems().layout();

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

Использование drag-and-drop для перемещения между Grid

Muuri поддерживает возможность перетаскивания элементов между разными Grid с помощью опции dragSort. Настройка выглядит следующим образом:

const grid1 = new Muuri('.grid1', {
  dragEnabled: true,
  dragSort: ['.grid2']
});

const grid2 = new Muuri('.grid2', {
  dragEnabled: true,
  dragSort: ['.grid1']
});

• dragEnabled: true — разрешает перетаскивание элементов внутри Grid.
• dragSort: [селектор] — указывает, что элементы могут быть перемещены в Grid, соответствующий указанному селектору. Можно указать несколько сеток.

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

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

Muuri позволяет управлять поведением элементов во время и после перемещения:

• События dragStart, dragRelease, dragEnd позволяют выполнять действия до и после перемещения:

grid1.on('dragEnd', (item) => {
  console.log('Элемент перемещен:', item.getElement());
});

• dragSortPredicate — функция, которая позволяет определить, можно ли помещать элемент в конкретную позицию другой сетки:

const grid1 = new Muuri('.grid1', {
  dragEnabled: true,
  dragSort: ['.grid2'],
  dragSortPredicate: (item, target, sibling) => {
    // Разрешаем перемещение только если target пуст или последний элемент
    return target.getItems().length === 0 || sibling === null;
  }
});

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

Примеры практического применения

1. Список задач Kanban Каждая колонка реализована как отдельный Grid. Перетаскивание карточек между колонками выполняется через dragSort, при этом порядок карточек сохраняется анимированно.

2. Галерея изображений с категориями Изображения можно перемещать между категориями, каждая из которых представляет отдельный Grid. Добавление и удаление изображений из сеток выполняется через методы remove и add.

3. Динамическое создание Grid Иногда требуется перемещать элементы в Grid, который создаётся на лету:

const newGrid = new Muuri(newContainer, { dragEnabled: true });
removedItems.forEach(item => newGrid.add(item.getElement()));
newGrid.layout();

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

Оптимизация работы при больших наборах элементов

• Вызывать refreshItems только после завершения серии изменений, чтобы избежать лишних перерасчётов.
• Использовать dragSortInterval для контроля частоты обновления сеток при перетаскивании элементов.
• Минимизировать количество одновременно анимируемых элементов при массовом переносе.

Резюме ключевых методов для перемещения элементов между Grid

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