Обмен между списками

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

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

Sortable.create(listA, {
    group: 'shared', // имя группы
    animation: 150
});

Sortable.create(listB, {
    group: 'shared',
    animation: 150
});

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

Ключевые моменты параметра group:

  • name — имя группы. Списки с одинаковым именем могут обмениваться элементами.
  • pull — определяет, можно ли забирать элементы из этого списка (true, false, 'clone').
  • put — указывает, разрешён ли приём элементов из других списков (true, false, массив имён групп).

Примеры расширенной конфигурации

Ограничение направления обмена

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

Sortable.create(listA, {
    group: {
        name: 'shared',
        pull: 'clone', // элементы копируются при переносе
        put: false     // элементы не могут быть помещены в этот список
    },
    animation: 200
});

Sortable.create(listB, {
    group: {
        name: 'shared',
        pull: true,
        put: true
    },
    animation: 200
});

В этом случае элементы из listA при перетаскивании будут копироваться, а не удаляться, и нельзя будет вернуть их обратно в listA.

Разные группы с разрешённым импортом

Допустимо создавать списки с разными именами групп, но разрешать им принимать элементы только из определённых источников:

Sortable.create(listC, {
    group: {
        name: 'listCGroup',
        pull: true,
        put: ['shared'] // принимает элементы только из группы shared
    },
    animation: 150
});

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

События при обмене между списками

SortableJS предоставляет богатый набор событий, которые полезны для отслеживания перетаскивания элементов между списками:

  • onAdd(evt) — вызывается, когда элемент добавляется в список из другого списка.
  • onRemove(evt) — вызывается, когда элемент удаляется из списка.
  • onUpdate(evt) — вызывается, когда элемент перемещается внутри списка.
  • onStart(evt) и onEnd(evt) — события начала и окончания перетаскивания, полезны для визуальных эффектов.

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

Sortable.create(listB, {
    group: 'shared',
    animation: 150,
    onAdd: function (evt) {
        console.log(`Элемент "${evt.item.textContent}" перемещён в список B`);
    }
});

Событие evt.item содержит DOM-элемент, а evt.from — исходный список. Это позволяет реализовать любые действия при перемещении: обновление данных, отправку на сервер или изменение стилей.

Клонирование элементов

Опция pull: 'clone' позволяет создавать копии элементов при перетаскивании. В сочетании с событиями можно реализовать динамическое добавление элементов без удаления исходных:

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

В этом режиме элемент из listA остаётся на месте, а в целевой список добавляется его копия.

Совмещение с другими функциональностями

Списки с обменом можно сочетать с другими возможностями SortableJS:

  • Сортировка внутри списка: элементы можно упорядочивать и одновременно перемещать между списками.
  • Фильтрация элементов: можно запрещать перетаскивание отдельных элементов с помощью опции filter.
  • Обработка клавиатуры и сенсорных устройств: библиотека поддерживает работу на разных устройствах, включая тачскрины.

Рекомендации по производительности

При работе с большим количеством списков и элементов важно учитывать:

  1. Использование параметра animation незначительно замедляет работу на тысячах элементов — стоит устанавливать разумное значение (50–150 мс).
  2. События onMove и onAdd могут вызываться часто; тяжелые операции внутри этих функций лучше вынести в отложенный обработчик.
  3. Для больших приложений рекомендуется использовать делегирование событий или обновлять только необходимые части DOM при обмене элементами.

Итоговые возможности

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

Оглавление