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

Библиотека Muuri предоставляет мощный и гибкий механизм для организации сеток элементов с возможностью drag-and-drop. Основная концепция заключается в том, что каждый элемент сетки может быть перемещён пользователем в пределах контейнера или между несколькими сетками. Для включения перетаскивания используется опция dragEnabled при инициализации сетки:

const grid = new Muuri('.grid', {
  dragEnabled: true
});

При установке dragEnabled: true каждый элемент автоматически становится доступным для перетаскивания, а библиотека заботится о корректной обработке перемещения и анимации.

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

По умолчанию Muuri позволяет перетаскивать весь элемент, однако можно ограничить область перетаскивания до конкретного дочернего узла, используя опцию dragHandle:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragHandle: '.handle'
});
  • .handle — CSS-селектор элемента, который будет служить “ручкой” для перетаскивания.
  • Остальная часть элемента не будет реагировать на попытки перетащить его.

Такой подход особенно полезен для карточек с контентом, где клики по кнопкам или ссылкам не должны инициировать drag-and-drop.

Ограничение направления перемещения

Muuri позволяет задавать ограничения движения элементов через опцию dragAxis. Она принимает значения:

  • 'x' — ограничение только по горизонтали
  • 'y' — ограничение только по вертикали
  • null — свободное перемещение по обеим осям

Пример использования:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragAxis: 'y'
});

В этом случае элементы будут перемещаться только вертикально, что удобно для списков или колонок.

Анимация при перетаскивании

Перетаскивание в Muuri сопровождается плавной анимацией, которая управляется настройками сетки:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSort: true,
  layout: {
    rounding: true
  }
});
  • dragSort позволяет элементам динамически менять позиции при перетаскивании, перемещая соседние элементы.
  • layout.rounding предотвращает пиксельные смещения и делает анимацию более плавной.
  • События dragStart, dragMove и dragEnd дают возможность кастомизировать поведение анимации или выполнять действия при начале, движении и завершении перетаскивания.

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

Muuri поддерживает drag-and-drop между несколькими сетками. Для этого достаточно указать массив сеток в опции dragSort:

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

grid1.getItems().forEach(item => item.getElement().dataset.group = 'A');
grid2.getItems().forEach(item => item.getElement().dataset.group = 'B');

grid1.options.dragSort = [grid2];
grid2.options.dragSort = [grid1];

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

  • Элементы могут быть перенесены только в указанные сетки.
  • Можно использовать кастомные фильтры для ограничений перетаскивания по группам или типам элементов.
  • Анимация корректно перестраивает сетки после перемещения.

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

Опции dragReleaseDuration и dragReleaseEasing управляют поведением элемента после отпускания:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragReleaseDuration: 400,
  dragReleaseEasing: 'ease'
});
  • dragReleaseDuration — время анимации возвращения элемента на место в миллисекундах.
  • dragReleaseEasing — тип easing-функции для плавности движения (например, ease, ease-in-out, linear).

Эти параметры позволяют сделать перетаскивание более естественным и отзывчивым.

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

Muuri предоставляет события для полной контролируемости процесса drag-and-drop:

grid.on('dragStart', item => {
  console.log('Начало перетаскивания:', item.getElement());
});

grid.on('dragMove', item => {
  console.log('Перемещаем элемент:', item.getElement());
});

grid.on('dragReleaseEnd', item => {
  console.log('Элемент отпущен:', item.getElement());
});
  • dragStart — срабатывает при начале перетаскивания.
  • dragMove — срабатывает при каждом движении элемента.
  • dragReleaseEnd — срабатывает после завершения перетаскивания и анимации возврата.

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

Управление блокировкой перетаскивания

В реальных проектах иногда необходимо временно отключить перетаскивание для отдельных элементов:

const item = grid.getItems()[0];
item.disableDrag();
item.enableDrag();
  • disableDrag() — отключает возможность перетаскивания.
  • enableDrag() — возвращает возможность перемещения элемента.

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

Интеграция с CSS и визуальными эффектами

Для улучшения UX рекомендуется комбинировать drag-and-drop с CSS-переходами:

.grid-item {
  transition: transform 0.3s ease, box-shadow 0.2s ease;
}

.grid-item.muuri-item-dragging {
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  z-index: 9999;
}
  • .muuri-item-dragging автоматически добавляется к элементу при начале перетаскивания.
  • Использование теней и поднятия элемента визуально отделяет его от остальной сетки.

Muuri предоставляет полный контроль над перетаскиванием: от базовой активации до сложных сценариев с анимацией, ограничениями, drag-handle и переносом между сетками. Настройки событий и параметров движения позволяют создавать интуитивные и отзывчивые интерфейсы.

Оглавление