Опция group

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

Основные формы задания `group`

group может быть указана в виде строки или объекта:

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

new Sortable(list1, {
    group: 'shared'
});
new Sortable(list2, {
    group: 'shared'
});

В этом случае элементы из list1 и list2 можно свободно перетаскивать между списками. Все списки с одинаковым значением строки образуют единое пространство сортировки.

Объектное значение Для более тонкой настройки используется объект, который позволяет контролировать операции pull (вынесение элемента) и put (добавление элемента):

new Sortable(list1, {
    group: {
        name: 'shared',
        pull: 'clone', // создаёт копию при перетаскивании
        put: false     // запрещает вставку в список
    }
});

Параметры объекта `group`:

name — имя группы (строка). Элементы можно перемещать между списками с одинаковым name.
pull — определяет возможность вынимать элемент из текущего списка. Может принимать значения:
- true — разрешено вынимать элемент.
- false — запрещено вынимать элемент.
- 'clone' — при вынимании создаётся копия элемента, оригинал остаётся на месте.
- Функция (to, from, dragEl) => boolean | 'clone' — динамическое управление.
put — определяет возможность вставлять элементы в список. Может быть:
- true — разрешено вставлять элементы из других списков.
- false — запрещено вставлять элементы.
- Функция (to, from, dragEl) => boolean — динамическое разрешение или запрет вставки.

Динамическая настройка групп

Функции для pull и put позволяют учитывать контекст перетаскивания: текущий список (to), исходный список (from) и сам элемент (dragEl). Это особенно полезно, когда правила зависят от типа элементов или их атрибутов:

new Sortable(list1, {
    group: {
        name: 'conditional',
        pull: (to, from, dragEl) => dragEl.dataset.locked !== 'true',
        put: (to, from, dragEl) => dragEl.dataset.allowed === 'yes'
    }
});

Специальные возможности

Clone: Значение pull: 'clone' используется для создания копий при перетаскивании, что позволяет строить интерфейсы с библиотекой элементов (например, панели компонентов, откуда элементы копируются в рабочую область).
Несколько списков: Списки могут принадлежать к разным группам, и перетаскивание между группами будет запрещено, если это не разрешено в настройках put.
Разные правила для разных списков: Один список может отдавать элементы (pull: true), но не принимать (put: false), а другой наоборот.

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

Простое объединение двух списков

const listA = document.getElementById('listA');
const listB = document.getElementById('listB');

new Sortable(listA, { group: 'common' });
new Sortable(listB, { group: 'common' });

Все элементы можно перемещать между listA и listB без ограничений.

Список только для копирования элементов

new Sortable(sourceList, {
    group: {
        name: 'components',
        pull: 'clone',
        put: false
    },
    sort: false
});

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

Списки с ограничением по типу элементов

new Sortable(targetList, {
    group: {
        name: 'targets',
        put: (to, from, dragEl) => dragEl.dataset.type === 'allowed'
    }
});

Только элементы с data-type="allowed" могут быть добавлены в targetList.

Взаимодействие с другими опциями

Опция group тесно связана с:

sort — управление сортировкой внутри списка. Можно запретить сортировку внутри, но разрешить перемещение между списками.
onAdd, onRemove — обработчики событий при добавлении и удалении элементов между списками.
animation — визуальная анимация при перемещении элементов между списками одной группы.