Приоритизация элементов

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

Инициализация и базовые параметры

Для начала работы необходимо создать экземпляр Sortable, указав целевой контейнер и набор опций:

const sortable = new Sortable(document.getElementById('list'), {
    animation: 150,
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen',
    dragClass: 'sortable-drag',
});

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

  • animation — задаёт длительность анимации перемещения элементов (в миллисекундах).
  • ghostClass — CSS-класс для отображения «призрачного» элемента во время перетаскивания.
  • chosenClass — класс для выделенного элемента.
  • dragClass — класс для элемента, который перемещается в данный момент.

Приоритизация элементов

Приоритизация в SortableJS реализуется через управление порядком элементов в списке и возможность динамического изменения их позиций на основе внешних условий.

Установка начального порядка

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

<ul id="task-list">
    <li data-priority="1">Задача 1</li>
    <li data-priority="3">Задача 3</li>
    <li data-priority="2">Задача 2</li>
</ul>

С помощью JavaScript можно отсортировать элементы по атрибуту data-priority:

const list = document.getElementById('task-list');
Array.from(list.children)
    .sort((a, b) => a.dataset.priority - b.dataset.priority)
    .forEach(el => list.appendChild(el));

После сортировки по приоритету, SortableJS продолжает обеспечивать перетаскивание, но теперь порядок элементов отражает важность.

Динамическое обновление приоритета

SortableJS предоставляет событие onEnd, которое вызывается после завершения перемещения элемента. Его можно использовать для автоматического пересчёта приоритетов:

const sortable = new Sortable(list, {
    animation: 150,
    onEnd: function(evt) {
        Array.from(list.children).forEach((el, index) => {
            el.dataset.priority = index + 1;
        });
    }
});

Особенности:

  • evt.oldIndex — исходная позиция перемещаемого элемента.
  • evt.newIndex — новая позиция элемента после перетаскивания.
  • dataset.priority автоматически обновляется, обеспечивая корректный порядок элементов.

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

SortableJS позволяет задавать правила перемещения с помощью функции filter или события onMove:

const sortable = new Sortable(list, {
    animation: 150,
    onMove: function(evt) {
        const dragged = evt.dragged;
        const target = evt.related;
        return parseInt(dragged.dataset.priority) >= parseInt(target.dataset.priority);
    }
});

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

Визуальное обозначение приоритета

Для улучшения восприятия можно применять CSS-классы в зависимости от приоритета:

[data-priority="1"] { background-color: #f8d7da; }
[data-priority="2"] { background-color: #fff3cd; }
[data-priority="3"] { background-color: #d4edda; }
.sortable-ghost { opacity: 0.5; }
.sortable-chosen { border: 2px solid #007bff; }

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

Работа с множественными списками

SortableJS поддерживает объединение нескольких списков с синхронизацией приоритетов:

const lists = document.querySelectorAll('.sortable-list');
lists.forEach(list => {
    new Sortable(list, {
        group: 'shared',
        animation: 150,
        onEnd: function(evt) {
            Array.from(evt.from.children).forEach((el, index) => el.dataset.priority = index + 1);
            if (evt.from !== evt.to) {
                Array.from(evt.to.children).forEach((el, index) => el.dataset.priority = index + 1);
            }
        }
    });
});

Эффекты:

  • Элементы можно перемещать между списками без потери информации о приоритете.
  • Приоритет пересчитывается автоматически в каждом списке после перемещения.

Программная манипуляция элементами

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

function moveToTop(element) {
    element.parentNode.prepend(element);
    Array.from(element.parentNode.children).forEach((el, index) => el.dataset.priority = index + 1);
}

Это особенно полезно для реализации функций «Сделать самым важным» или «Переместить вверх по списку».

Поддержка дополнительных функций

  • swapThreshold — задаёт чувствительность для функции обмена элементов при наведении.
  • scroll и scrollSensitivity — обеспечивают автоскроллинг контейнера при перемещении элемента за пределы видимой области.
  • handle — задаёт конкретный элемент, за который можно перетаскивать, предотвращая случайные срабатывания.

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

Интеграция с внешними системами

Данные о приоритете элементов можно синхронизировать с серверной частью через AJAX или WebSocket:

sortable.option("onEnd", function(evt) {
    const priorities = Array.from(list.children).map(el => ({
        id: el.id,
        priority: el.dataset.priority
    }));
    fetch('/update-priorities', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(priorities)
    });
});

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

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

Оглавление