Обработка начала перетаскивания

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

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSort: true, // позволяет менять порядок элементов
  dragContainer: document.body // контейнер для перетаскиваемого элемента
});
  • dragEnabled – глобальное включение перетаскивания для всех элементов сетки.
  • dragSort – разрешает изменение порядка элементов при перетаскивании.
  • dragContainer – определяет DOM-элемент, в котором будет визуально перемещаться элемент во время перетаскивания.

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

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

Muuri предоставляет детальную систему событий для перетаскивания. Основные события, связанные с инициацией перетаскивания, это:

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

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

grid.on('dragStart', function(item) {
  item.getElement().style.transition = 'none'; // отключение анимации на время перетаскивания
  console.log('Перетаскивание начато для элемента:', item.getElement());
});

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

  • Событие dragStart передаёт объект item, который содержит все данные о перетаскиваемом элементе.
  • Можно динамически изменять стили элемента для плавного визуального эффекта.
  • В момент начала перетаскивания элемент перестаёт участвовать в обычной раскладке сетки до завершения операции.

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

Muuri позволяет ограничивать начало перетаскивания определёнными условиями. Основная опция для этого – dragStartPredicate, которая задаёт функцию проверки:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragStartPredicate: function(item, event) {
    // разрешаем перетаскивание только при клике на заголовок элемента
    return event.target.classList.contains('item-header');
  }
});
  • item – объект элемента Muuri.
  • event – исходное событие DOM (например, mousedown или touchstart).
  • Возвращаемое значение true или false определяет, разрешено ли начало перетаскивания.

Это позволяет создавать гибкую логику, например:

  • перетаскивание только по определённой области элемента;
  • запрет на перетаскивание для закреплённых элементов;
  • включение перетаскивания только при удержании клавиши Shift или Ctrl.

Визуальные эффекты при старте перетаскивания

Для улучшения UX важно корректно обработать визуальное состояние элемента на старте. Основные приёмы:

  1. Отключение переходов анимации – предотвращает дергание элемента.
  2. Изменение z-index – элемент становится выше остальных для наглядного выделения.
  3. Применение классов CSS – позволяет легко стилизовать элемент в состоянии «перетаскивается».

Пример:

grid.on('dragStart', function(item) {
  const el = item.getElement();
  el.style.transition = 'none';
  el.style.zIndex = 1000;
  el.classList.add('dragging');
});

После завершения перетаскивания следует вернуть исходные стили:

grid.on('dragReleaseEnd', function(item) {
  const el = item.getElement();
  el.style.transition = '';
  el.style.zIndex = '';
  el.classList.remove('dragging');
});

Работа с координатами и ограничениями

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

  • dragAxis – ограничивает движение по оси x или y.
  • dragSortInterval – минимальное расстояние перемещения до перестановки элементов.
  • dragReleaseDuration – время анимации возвращения элемента на место при отмене перетаскивания.

Пример ограничения по вертикали:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragAxis: 'y' // движение только по вертикали
});

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

Итоговая структура процесса

  1. Инициализация сетки с dragEnabled – делает элементы перетаскиваемыми.
  2. Настройка dragStartPredicate – определяет условия начала перетаскивания.
  3. Обработка события dragStart – задаются визуальные эффекты, отключается анимация.
  4. Управление координатами и ограничениями – задаются осевые ограничения и поведение при отмене.
  5. Завершение перетаскивания (dragReleaseEnd) – восстановление исходного состояния элемента.

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

Оглавление