Режимы pull и put

SortableJS предоставляет мощные возможности для реализации перетаскивания элементов между списками. Ключевыми инструментами для управления обменом элементов между списками являются параметры pull и put. Эти параметры используются внутри объекта group, который задаётся при инициализации экземпляра Sortable.

Объект group и его свойства

new Sortable(listElement, {
    group: {
        name: 'shared',
        pull: true,
        put: false
    }
});
  • name — уникальное имя группы, определяющее, какие списки могут обмениваться элементами.
  • pull — управляет возможностью вытягивания элемента из этого списка в другой.
  • put — управляет возможностью вставки элементов из других списков в этот список.

Оба свойства могут принимать несколько типов значений:

  1. Булевы значения:

    • true — разрешает действие.
    • false — запрещает действие.

  2. Строки — имя группы, из которой разрешён pull или в которую разрешён put.

  3. Функции — динамически определяют разрешение действия, принимая объект to (список назначения) или from (список источника).

Режим pull

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

  • pull: true — любой элемент может быть перемещён в другой список, принадлежащий той же группе.
  • pull: false — элементы из списка нельзя перемещать в другие списки.
  • pull: 'clone' — элемент не удаляется из исходного списка, а создаётся его копия в списке назначения.
  • Функция: позволяет динамически разрешать или запрещать вытягивание. Пример:
pull: function (to, from, dragElement) {
    return dragElement.dataset.type === 'draggable';
}

Здесь элемент может быть перемещён только если его атрибут data-type равен "draggable".

Режим put

put управляет тем, можно ли вставлять элементы в этот список из других списков. Варианты:

  • put: true — все элементы из групп с одинаковым именем могут быть вставлены.
  • put: false — вставка запрещена.
  • Строка или массив строк — разрешение вставки только из указанных групп:
put: ['groupA', 'groupB']
  • Функция позволяет контролировать вставку на лету:
put: function (to, from, dragElement) {
    return dragElement.classList.contains('allow-drop');
}

Элемент вставляется только если он имеет класс allow-drop.

Взаимодействие pull и put

Комбинация pull и put задаёт полный контроль над обменом элементов между списками. Важные закономерности:

  • Для успешного перемещения элемент должен разрешать pull из исходного списка и разрешать put в целевом списке.
  • Если pull настроен на 'clone', элемент создаётся копией, исходный остаётся на месте.
  • Различные списки могут иметь разные политики pull и put для управления сложными сценариями сортировки.

Пример сложного взаимодействия:

Sortable.create(listA, {
    group: {
        name: 'shared',
        pull: 'clone',
        put: false
    }
});

Sortable.create(listB, {
    group: {
        name: 'shared',
        pull: true,
        put: ['shared']
    }
});
  • Элементы из listA можно копировать в listB, но нельзя удалить их из listA.
  • Элементы listB можно перемещать в другие списки группы shared.

Практические сценарии использования

  1. Копирование шаблонов элементов pull: 'clone' полезен для библиотек компонентов или шаблонов, когда исходный элемент нужно оставить неизменным.

  2. Ограничение вставки Использование put с массивом имён групп позволяет контролировать, какие списки могут принимать элементы. Это особенно актуально для административных панелей с несколькими категориями.

  3. Динамическая фильтрация Функции в pull и put дают возможность реализовать правила на основе типа элемента, его атрибутов или состояния списка, создавая гибкую систему разрешений.

  4. Разделение списков на источники и приёмники Можно настроить один список как только источник (pull: 'clone', put: false), а другой — как только приёмник (pull: false, put: true), обеспечивая строгую модель перетаскивания.

Подсказки по производительности и UX

  • В случаях с большим количеством элементов рекомендуется использовать pull: 'clone' с ленивой генерацией DOM, чтобы уменьшить нагрузку на страницу.
  • При сложных правилах лучше реализовывать логику через функции, чтобы избежать избыточного создания групп и списков.
  • Визуальная обратная связь при pull: 'clone' помогает пользователю понять, что элемент копируется, а не перемещается.

Использование pull и put превращает SortableJS в гибкий инструмент для организации сортируемых интерфейсов, конструкторов, драг-н-дроп редакторов и систем управления контентом, обеспечивая полный контроль над поведением элементов между списками.

Оглавление