Параметр dragSort

В библиотеке Muuri параметр dragSort играет ключевую роль в управлении поведением перетаскиваемых элементов и их взаимодействием с другими контейнерами. Он определяет, может ли элемент быть перемещен не только внутри своего контейнера, но и между несколькими контейнерами. Использование этого параметра позволяет создавать сложные интерфейсы с drag-and-drop, где объекты динамически меняют свое расположение и принадлежность к контейнерам.

Типы значений dragSort

dragSort может принимать несколько вариантов:

  1. true Элемент можно перемещать между контейнерами, если они связаны друг с другом через dragSort. Все контейнеры, которые должны участвовать в обмене элементами, должны быть перечислены при инициализации.

  2. false Перетаскивание ограничено текущим контейнером. Элемент нельзя переместить в другой контейнер, даже если существует соответствующая конфигурация.

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

Настройка dragSort при инициализации

При создании Muuri-контейнера dragSort настраивается через объект dragSort в параметрах:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSort: true, // Можно передать массив контейнеров вместо true
  dragSortPredicate: {
    threshold: 50,
    action: 'move'
  }
});
  • dragEnabled – обязательно должно быть true, чтобы dragSort начал работать.
  • dragSortPredicate – определяет, как происходит сортировка при перемещении, в том числе чувствительность к положению курсора (threshold) и действие (move или swap).

Использование массива контейнеров

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

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

grid1._dragSort = [grid2];
grid2._dragSort = [grid1];

В этом примере элементы могут перемещаться только между grid1 и grid2. Другие контейнеры, не включённые в массив, будут игнорироваться.

Связь с dragSortPredicate

Параметр dragSort тесно связан с dragSortPredicate, который управляет правилами сортировки:

  • threshold – процентное значение, определяющее, на сколько элемент должен пересечь границу другого элемента, чтобы произвести перемещение.

  • action – действие при пересечении:

    • 'move' – элемент перемещается на новое место, сдвигая остальные элементы.
    • 'swap' – элементы меняются местами.

Пример:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSort: true,
  dragSortPredicate: {
    threshold: 40,
    action: 'swap'
  }
});

В этом случае при пересечении 40% площади соседнего элемента произойдет обмен позициями.

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

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

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSort: (item, event) => {
    return !item.getElement().classList.contains('fixed');
  }
});

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

События при dragSort

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

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

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

grid.on('dragReleaseEnd', function(item) {
  console.log('Элемент перемещён:', item.getElement());
});

Советы по производительности

  • При использовании нескольких контейнеров лучше явно указывать массив контейнеров вместо true, чтобы не проверять все доступные контейнеры.
  • Для большого количества элементов рекомендуется настроить dragSortPredicate.threshold, чтобы избежать случайных перемещений.
  • Если элементы динамически добавляются, необходимо обновлять массив контейнеров dragSort, чтобы новые элементы корректно участвовали в перетаскивании.

Практический пример

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

gridA._dragSort = [gridB];
gridB._dragSort = [gridA];

gridA.on('dragReleaseEnd', (item) => {
  console.log('Элемент из GridA перемещён в:', item.getGrid()._element);
});

gridB.on('dragReleaseEnd', (item) => {
  console.log('Элемент из GridB перемещён в:', item.getGrid()._element);
});

В этом примере элементы могут перемещаться только между двумя контейнерами, при этом каждая операция логируется в консоль.

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

Оглавление