Параметры dragging

Muuri предоставляет гибкую систему перетаскивания элементов сетки, позволяя точно контролировать поведение draggable-элементов. Настройка параметров dragging осуществляется через объект конфигурации при инициализации сетки или при динамическом включении/отключении перетаскивания.

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

Для активации перетаскивания используется параметр:

dragEnabled: true

По умолчанию dragEnabled установлен в true, что делает все элементы сетки перетаскиваемыми. Для отключения можно использовать:

grid.updateOptions({ dragEnabled: false });

или при инициализации:

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

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

Muuri позволяет ограничить направление перетаскивания через dragAxis. Возможные значения:

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

Пример:

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

Чувствительность и порог срабатывания

  • dragStartPredicate – функция или объект, определяющий условия начала перетаскивания. Например, можно задавать задержку перед началом перетаскивания или учитывать только определённые элементы внутри карточки.
const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragStartPredicate: {
    distance: 10, // Начало после перемещения на 10px
    delay: 100    // Задержка 100 мс
  }
});
  • distance контролирует минимальное смещение курсора до начала перетаскивания.
  • delay задаёт временной интервал удержания элемента перед активацией drag.

Можно также использовать кастомную функцию:

dragStartPredicate: function (item, event) {
  return event.target.classList.contains('drag-handle');
}

Обработка событий drag

Muuri предоставляет набор событий, связанных с перетаскиванием:

  • dragStart – триггерится при начале перемещения.
  • dragMove – срабатывает при каждом шаге движения.
  • dragEnd – событие завершения перетаскивания.
  • dragReleaseStart и dragReleaseEnd – для обработки момента, когда элемент отпускается и возвращается на своё место.

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

grid.on('dragStart', function (item) {
  item.getElement().style.opacity = '0.5';
});

grid.on('dragEnd', function (item) {
  item.getElement().style.opacity = '1';
});

Перетаскивание по handle

Для более точного управления можно указать конкретный элемент внутри карточки, с которого разрешено перетаскивание:

dragStartPredicate: {
  handle: '.drag-handle'
}

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

Ограничение границ и авто-скроллинг

Muuri позволяет ограничить движение элементов и автоматически прокручивать контейнер:

  • dragSort: true или массив контейнеров, в которых можно перемещать элемент.
  • dragSortHeuristics: объект с параметрами для оптимизации сортировки и визуальной реакции.
dragSort: true,
dragSortHeuristics: {
  sortInterval: 50,
  minDragDistance: 10,
  minBounceBackAngle: 1
}
  • sortInterval – частота проверки позиции для сортировки.
  • minDragDistance – минимальное расстояние до активации перестановки.
  • minBounceBackAngle – минимальный угол для отката элемента при столкновении.

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

Muuri поддерживает плавное возвращение и перемещение элементов:

dragReleaseDuration: 400,
dragReleaseEasing: 'ease'
  • dragReleaseDuration – продолжительность анимации возврата в миллисекундах.
  • dragReleaseEasing – тип easing, который определяет стиль анимации (например, 'ease', 'linear', 'ease-in-out').

Включение/отключение динамически

Все параметры перетаскивания можно изменять на лету через метод updateOptions:

grid.updateOptions({
  dragEnabled: true,
  dragAxis: 'x'
});

Это позволяет создавать адаптивные интерфейсы, где перетаскивание включается только при определённых условиях или разрешениях пользователя.

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

  • dragEnabled – включает или выключает перетаскивание.
  • dragAxis – задаёт направление перемещения.
  • dragStartPredicate – определяет условия запуска drag (задержка, расстояние, handle).
  • dragSort / dragSortHeuristics – управление сортировкой и ограничениями движения.
  • dragReleaseDuration / dragReleaseEasing – настройка анимации возврата элементов.
  • Возможность подписки на события dragStart, dragMove, dragEnd для кастомного поведения.

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

Оглавление