Свойства Grid

Библиотека Muuri предоставляет мощный инструмент для создания динамических, отзывчивых и анимированных сеток. Центральным элементом управления поведением сетки являются свойства Grid, которые задаются при инициализации или могут изменяться динамически в процессе работы.

dragEnabled и dragSort

Свойство dragEnabled включает возможность перетаскивания элементов сетки. Оно принимает булевое значение:

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

Если требуется возможность сортировки элементов между несколькими сетками, используется dragSort:

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

grid1.on('dragReleaseEnd', function (item) {
  grid2.add(item.getElement());
});
  • dragEnabled — управляет перетаскиванием элементов внутри одной сетки.
  • dragSort — позволяет перемещать элементы между сетками или ограничивать их попадание в конкретные контейнеры.

layoutDuration и layoutEasing

Эти свойства определяют анимацию при изменении расположения элементов.

  • layoutDuration — длительность анимации в миллисекундах.
  • layoutEasing — функция ускорения анимации.

Пример:

const grid = new Muuri('.grid', {
  layoutDuration: 400,
  layoutEasing: 'ease'
});

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

layout и layoutOnResize

Свойство layout управляет алгоритмом расположения элементов. По умолчанию Muuri использует grid-based layout, но поддерживаются и кастомные функции:

const grid = new Muuri('.grid', {
  layout: {
    fillGaps: true
  }
});
  • fillGaps: true — элементы заполняют пустые пространства, создавая плотную сетку.
  • layoutOnResize — автоматически перестраивает сетку при изменении размеров контейнера.

dragAxis

Позволяет ограничить движение перетаскиваемого элемента только по оси x или y.

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragAxis: 'y'
});
  • Полезно для вертикальных или горизонтальных списков, где необходимо ограничить направление движения.

dragSortPredicate

Сложное свойство, управляющее правилами сортировки при перетаскивании. Оно может быть функцией, возвращающей true или false для каждого потенциального контейнера.

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSortPredicate: function (item, targetGrid) {
    return targetGrid.getItems().length < 5;
  }
});
  • Используется для ограничения количества элементов в другой сетке.
  • Позволяет реализовать сложные логики перетаскивания, включая фильтрацию контейнеров по классам или состояниям.

dragSortInterval

Задает интервал проверки перетаскиваемого элемента относительно других сеток. Определяется в миллисекундах:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSortInterval: 50
});
  • Меньшие значения обеспечивают более отзывчивую сортировку, но могут нагружать браузер.
  • Оптимальное значение зависит от количества элементов и мощности устройства.

showDuration и hideDuration

Эти свойства управляют анимацией появления и скрытия элементов:

const grid = new Muuri('.grid', {
  showDuration: 300,
  hideDuration: 300
});
  • showDuration — длительность анимации появления.
  • hideDuration — длительность анимации скрытия.
  • Совместно с showEasing и hideEasing позволяет создавать плавные эффекты для динамически добавляемых элементов.

sortData

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

const grid = new Muuri('.grid', {
  sortData: {
    name: function (item) { return item.getElement().dataset.name; },
    value: function (item) { return parseInt(item.getElement().dataset.value); }
  }
});

grid.sort('value');
  • sortData может использоваться для сортировки по тексту, числам, датам или любым пользовательским меткам.
  • Поддерживает динамическое обновление через метод refreshItems().

dragPlaceholder

Свойство управляет отображением временного элемента при перетаскивании.

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragPlaceholder: {
    enabled: true,
    duration: 200,
    createElement: function (item) {
      const placeholder = document.createElement('div');
      placeholder.className = 'placeholder';
      placeholder.style.height = item.getHeight() + 'px';
      return placeholder;
    }
  }
});
  • Позволяет улучшить визуальное восприятие перемещения элементов.
  • Поддерживает кастомизацию размеров, стилей и анимации.

dragStartPredicate

Определяет условия, при которых элемент можно начать перетаскивать.

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragStartPredicate: {
    handle: '.handle'
  }
});
  • Можно ограничить область для захвата элемента (handle) или использовать кастомную функцию, проверяющую дополнительные условия.

dragSortInterval и dragReleaseDuration

  • dragSortInterval — интервал проверки сортировки (обсуждалось выше).
  • dragReleaseDuration — время анимации возвращения элемента в сетку после отпускания:
const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragReleaseDuration: 400
});
  • Создает плавный эффект «возврата» элемента на место или в другую сетку.

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

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

Оглавление