Базовые стили

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

Подключение и инициализация

Для использования SortableJS достаточно подключить библиотеку через CDN или npm. После подключения создается экземпляр Sortable для контейнера с элементами:

import Sortable from 'sortablejs';

const list = document.getElementById('sortable-list');

Sortable.create(list, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen'
});
  • animation — задает длительность анимации перемещения элементов в миллисекундах.
  • ghostClass — CSS-класс для элемента, который отображается при перетаскивании.
  • chosenClass — CSS-класс для элемента в момент его выбора перед перетаскиванием.

Настройка базовых стилей

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

#sortable-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#sortable-list li {
    padding: 10px 15px;
    margin: 5px 0;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: grab;
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background-color: #d0d0ff;
}
  • list-style-type: none убирает стандартные маркеры списка.
  • cursor: grab делает визуально понятным, что элемент можно перетаскивать.
  • opacity и изменения цвета при перетаскивании повышают восприятие интерфейса пользователем.

Работа с событиями

SortableJS предоставляет большое количество событий для управления поведением списка:

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

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

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

Группировка и перенос между списками

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

const listA = document.getElementById('list-a');
const listB = document.getElementById('list-b');

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

Sortable.create(listB, {
    group: 'shared',
    animation: 150
});
  • group — имя группы, элементы которой можно перемещать между списками с одинаковым названием группы.
  • Элементы могут перемещаться только между списками одной группы.

Ограничение перетаскивания

Для управления тем, какие элементы можно перемещать, используется параметр filter и CSS-классы:

Sortable.create(list, {
    animation: 150,
    filter: '.non-draggable',
    onMove: function (evt) {
        return !evt.related.classList.contains('non-draggable');
    }
});
  • Элементы с классом .non-draggable нельзя перетаскивать.
  • onMove возвращает false, чтобы заблокировать перенос определенных элементов.

Вложенные списки

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

<ul id="nested-list">
    <li>
        Элемент 1
        <ul>
            <li>Подэлемент 1.1</li>
            <li>Подэлемент 1.2</li>
        </ul>
    </li>
    <li>Элемент 2</li>
</ul>
Sortable.create(document.getElementById('nested-list'), {
    group: 'nested',
    animation: 150,
    fallbackOnBody: true,
    swapThreshold: 0.65
});
  • fallbackOnBody перемещает элемент в body на время перетаскивания для корректного позиционирования.
  • swapThreshold задает чувствительность перемещения относительно других элементов.

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

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

const newItem = document.createElement('li');
newItem.textContent = 'Новый элемент';
list.appendChild(newItem);

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

Настройка визуальной обратной связи

Библиотека позволяет легко изменять визуальные эффекты через CSS:

  • ghostClass — прозрачность и стиль элемента во время перетаскивания.
  • chosenClass — стиль выбранного элемента.
  • dragClass — дополнительный класс для элементов при активном перемещении.
.sortable-drag {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

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

Итоговые рекомендации по стилям

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

Базовые стили и правильная настройка SortableJS создают интуитивно понятный интерфейс с гибким управлением и расширяемостью для любых проектов на JavaScript.

Оглавление