Типы данных

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

Подключение библиотеки

Для начала необходимо подключить SortableJS к проекту. Это можно сделать через CDN:

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

Либо через npm для проектов с модульной системой:

npm install sortablejs

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

import Sortable from 'sortablejs';

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

Создание интерактивного списка осуществляется с помощью конструктора Sortable. Ключевым параметром является элемент DOM, на котором будет применяться сортировка:

const list = document.getElementById('items');
const sortable = new Sortable(list, {
    animation: 150, // Время анимации перемещения элементов
    ghostClass: 'sortable-ghost', // Класс для визуального отображения перетаскиваемого элемента
    chosenClass: 'sortable-chosen' // Класс для выделенного элемента
});

Ключевые моменты:

  • animation обеспечивает плавное перемещение элементов.
  • ghostClass помогает визуализировать перетаскиваемый элемент.
  • chosenClass обозначает элемент, который в данный момент выбран для перемещения.

Настройка параметров

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

  • group — позволяет объединять несколько списков для перетаскивания между ними:
new Sortable(list, {
    group: 'shared', // Элементы можно перемещать между списками с одной группой
    pull: true,      // Разрешает вытаскивать элементы
    put: true        // Разрешает вставлять элементы
});
  • sort — включение или отключение сортировки внутри списка.
  • disabled — временное отключение перетаскивания элементов.
  • filter — возможность указать элементы, которые нельзя перетаскивать:
filter: '.no-drag', // Элементы с этим классом не будут перетаскиваться

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

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

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

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

const sortable = new Sortable(list, {
    onEnd: function(evt) {
        console.log(`Элемент перемещён с позиции ${evt.oldIndex} на ${evt.newIndex}`);
    },
    onAdd: function(evt) {
        console.log('Элемент добавлен из другого списка');
    }
});

Работа с DOM и данными

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

  • toArray() — возвращает массив идентификаторов элементов в текущем порядке.
  • sort() — сортировка элементов по заданному массиву идентификаторов:
const order = sortable.toArray();
console.log(order); // ['item1', 'item2', 'item3']

sortable.sort(['item3', 'item1', 'item2']); // Изменение порядка элементов

Для корректной работы toArray и sort необходимо, чтобы каждый элемент имел атрибут data-id.

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

SortableJS легко интегрируется с React, Vue и другими фреймворками. В React, например, используется useEffect для инициализации:

import React, { useEffect, useRef } from 'react';
import Sortable from 'sortablejs';

function ItemList({ items }) {
    const listRef = useRef(null);

    useEffect(() => {
        const sortable = new Sortable(listRef.current, {
            animation: 150
        });
        return () => sortable.destroy();
    }, []);

    return (
        <ul ref={listRef}>
            {items.map(item => <li key={item.id} data-id={item.id}>{item.name}</li>)}
        </ul>
    );
}

Vue использует аналогичный подход через директиву v-sortable или создание плагина для управления списком.

Расширенные возможности

SortableJS поддерживает ряд продвинутых функций:

  • Фиксация направления: direction: 'vertical' или 'horizontal'.
  • Клон элементов: swap или setData для работы с переносом данных.
  • Поддержка сенсорных устройств через встроенную обработку touch-событий.
  • Подключение плагинов: MultiDrag, Swap, AutoScroll для расширения возможностей библиотеки.

Структура кода и рекомендации

Для крупных приложений рекомендуется:

  1. Разделять инициализацию Sortable по компонентам.
  2. Использовать события для синхронизации состояния с данными приложения.
  3. Присваивать уникальные data-id для каждого элемента, чтобы методы toArray и sort работали корректно.
  4. Оборачивать деструктивные операции (destroy) в cleanup для предотвращения утечек памяти.

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

Оглавление