Директивы для перетаскивания

SortableJS — это библиотека для реализации перетаскивания элементов в списках на веб-страницах с помощью JavaScript. Она предоставляет удобный API для создания интерактивных списков, поддерживает работу с DOM, событиями и позволяет гибко настраивать поведение при сортировке.

Для начала работы с SortableJS необходимо подключить библиотеку:

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

После подключения создается экземпляр Sortable на контейнере с элементами списка:

const sortable = new Sortable(document.getElementById('myList'), {
    animation: 150,
    handle: '.handle'
});

Здесь ключевые параметры:

  • animation — время анимации при перемещении элементов (в миллисекундах).
  • handle — селектор элемента внутри каждой позиции, который будет использоваться для перетаскивания.

Настройка контейнера и элементов

SortableJS оперирует контейнерами (родительский элемент) и элементами внутри (дети контейнера). Все изменения сортировки происходят именно на уровне DOM-элементов.

Атрибуты и CSS:

  • draggable="true" — указывает, что элемент может быть перемещаемым.
  • cursor: grab и cursor: grabbing — визуальные подсказки при перетаскивании.
.item {
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    cursor: grab;
}
.item.dragging {
    opacity: 0.6;
}

Основные директивы SortableJS

group

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

new Sortable(document.getElementById('list1'), {
    group: 'shared',
    animation: 150
});

new Sortable(document.getElementById('list2'), {
    group: 'shared',
    animation: 150
});

Параметры group:

  • name — имя группы.
  • pull — разрешает/запрещает вынос элементов в другие списки. Значения: true, false, "clone".
  • put — разрешает/запрещает принимать элементы из других списков.

sort

Управляет возможностью сортировки внутри одного списка:

new Sortable(list, {
    sort: true  // элементы можно перемещать внутри списка
});

Установка sort: false превращает список в статичный контейнер, позволяя только добавлять элементы извне.

handle

Определяет элементы, за которые можно захватывать позицию для перемещения.

new Sortable(list, {
    handle: '.drag-handle'
});

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

filter

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

new Sortable(list, {
    filter: '.non-draggable',
    onFilter: function(evt) {
        console.log('Попытка перетащить запрещённый элемент');
    }
});

Важно: элементы с классом non-draggable остаются в списке, но не могут быть захвачены.

draggable

Селектор дочерних элементов, которые можно перемещать:

new Sortable(list, {
    draggable: '.item'
});

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

События SortableJS

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

  • onStart — вызывается при начале перетаскивания.
  • onEnd — вызывается после завершения перетаскивания.
  • onAdd — срабатывает, когда элемент добавляется из другого списка.
  • onUpdate — срабатывает при изменении порядка внутри списка.
  • onRemove — срабатывает, когда элемент удаляется из списка.

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

new Sortable(list, {
    onEnd: function(evt) {
        console.log(`Элемент ${evt.item.textContent} перемещён с позиции ${evt.oldIndex} на ${evt.newIndex}`);
    }
});

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

Настройка поведения и визуальных эффектов

  • animation — плавность перемещения элементов.
  • ghostClass — класс для отображения “призрачного” элемента во время перетаскивания:
new Sortable(list, {
    ghostClass: 'dragging'
});
  • chosenClass — класс элемента, который выбран для перетаскивания.
  • swap — позволяет включить режим swap (замена элементов) вместо стандартного перемещения.
new Sortable(list, {
    swap: true,
    swapClass: 'highlight'
});

Работа с динамическим контентом

SortableJS поддерживает динамическое добавление и удаление элементов. После вставки новых элементов их можно сразу сделать перетаскиваемыми:

const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Новый элемент';
list.appendChild(newItem);
sortable.addEventListener('onAdd', function(evt){});

Библиотека автоматически обновляет внутренние структуры после изменения DOM.

Интеграция с фреймворками

SortableJS легко интегрируется с популярными фреймворками:

  • Vue.js через vuedraggable.
  • React через react-sortablejs.
  • Angular через адаптеры ngx-sortablejs.

В таких случаях директивы group, handle, filter и события остаются идентичными, а синхронизация с состоянием фреймворка осуществляется автоматически.

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

Оглавление