Конструкторы интерфейсов

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

Ключевые особенности:

  • Поддержка сортировки внутри одного списка и между несколькими списками.
  • Работа с любыми HTML-элементами.
  • Настраиваемая анимация перетаскивания.
  • Поддержка событий на всех этапах взаимодействия: начало перетаскивания, перемещение, завершение операции.
  • Возможность блокировки определённых элементов от перемещения.

Инициализация Sortable

Для создания интерактивного списка используется конструктор Sortable, который принимает два параметра: DOM-элемент контейнера и объект с настройками.

const list = document.getElementById('my-list');
const sortable = new Sortable(list, {
    animation: 150,
    handle: '.handle',
    ghostClass: 'dragging',
    onEnd: function (evt) {
        console.log(`Элемент ${evt.item.textContent} перемещён с позиции ${evt.oldIndex} на ${evt.newIndex}`);
    }
});

Пояснения параметров:

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

Работа с несколькими списками

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

const lists = document.querySelectorAll('.connected-list');
lists.forEach(list => {
    new Sortable(list, {
        group: 'shared',
        animation: 200,
        onAdd: function (evt) {
            console.log(`Элемент добавлен в новый список: ${evt.item.textContent}`);
        },
        onRemove: function (evt) {
            console.log(`Элемент удалён из списка: ${evt.item.textContent}`);
        }
    });
});

Ключевой момент: использование свойства group объединяет списки в одну группу, что позволяет элементам перемещаться между ними.

Настройка ограничения перетаскивания

С помощью настроек SortableJS можно ограничивать, какие элементы можно перемещать, и в каких направлениях возможны действия:

  • filter — селектор элементов, которые нельзя перемещать.
  • draggable — селектор элементов, которые можно перетаскивать.
  • sort — булево значение, определяющее, можно ли сортировать внутри контейнера.
new Sortable(list, {
    draggable: '.sortable-item',
    filter: '.disabled',
    onMove: function (evt) {
        return !evt.related.classList.contains('disabled');
    }
});

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

События и обратные вызовы

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

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

События передают объект evt с полезными свойствами:

  • evt.item — перемещаемый элемент.
  • evt.from — исходный контейнер.
  • evt.to — конечный контейнер.
  • evt.oldIndex — исходная позиция.
  • evt.newIndex — новая позиция.
  • evt.clone — клон элемента (при использовании опции pull: 'clone').

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

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

  • .ghost или кастомный ghostClass — элемент-подсказка при перетаскивании.
  • .chosen или кастомный chosenClass — элемент, выбранный для перемещения.
  • .dragging — класс для динамических изменений стиля.
.dragging {
    opacity: 0.5;
    border: 2px dashed #999;
}
.ghost {
    opacity: 0.3;
}

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

Продвинутые возможности

Клонирование элементов: можно создавать копии вместо перемещения оригинала, используя опцию группы с pull: 'clone'.

new Sortable(list, {
    group: {
        name: 'clone',
        pull: 'clone',
        put: false
    },
    animation: 150
});

Сортировка по ограниченной оси: установка direction ('horizontal' или 'vertical') позволяет ограничить направление движения элементов.

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

sortable.toArray(); // возвращает массив id элементов
sortable.sort([2, 0, 1]); // переставляет элементы по новому порядку
sortable.destroy(); // отключает сортировку

SortableJS предоставляет комплексный набор инструментов для создания динамических интерфейсов с drag-and-drop. Гибкая настройка событий, возможность работы с несколькими списками и интеграция с DOM делают библиотеку удобной для реализации сложных пользовательских интерфейсов.

Оглавление