Обработка событий

SortableJS — это легковесная библиотека для организации перетаскиваемых списков на странице. Для начала работы необходимо подключить библиотеку через CDN или установить через npm:

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

или через npm:

npm install sortablejs

Создание экземпляра Sortable происходит с помощью конструктора:

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

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

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

Основные события

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

  1. onStart — срабатывает в момент начала перетаскивания.
  2. onEnd — срабатывает при завершении перетаскивания, даже если позиция не изменилась.
  3. onAdd — срабатывает, когда элемент добавлен в список (полезно при использовании нескольких списков).
  4. onUpdate — срабатывает, когда элемент перемещён внутри одного списка.
  5. onRemove — срабатывает, когда элемент удалён из списка.
  6. onSort — срабатывает при любом изменении порядка элементов, включая перемещения внутри списка.
  7. onFilter — вызывается для элементов, отмеченных фильтром, при попытке их перетаскивания.
  8. onMove — позволяет контролировать возможность перемещения элемента (возвращает true/false).

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

const sortable = new Sortable(el, {
    animation: 150,
    onStart: function (evt) {
        console.log('Начало перетаскивания:', evt.item);
    },
    onEnd: function (evt) {
        console.log('Завершение перетаскивания:', evt.item);
    },
    onUpdate: function (evt) {
        console.log('Элемент перемещён:', evt.oldIndex, '→', evt.newIndex);
    }
});

Объект события

Все обработчики получают объект события с полезными свойствами:

  • item — HTML-элемент, который перетаскивается.
  • from — родительский элемент, из которого берется перетаскиваемый элемент.
  • to — родительский элемент, в который помещён элемент.
  • oldIndex — исходный индекс элемента.
  • newIndex — новый индекс элемента.
  • clone — клонированный элемент (при использовании pull в группах).
  • pullMode — режим перемещения при работе с группами списков.

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

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

Фильтрация и запрет перемещения

SortableJS поддерживает фильтры для ограничения действий пользователя:

const sortable = new Sortable(el, {
    filter: '.no-drag',
    onFilter: function (evt) {
        console.log('Попытка переместить запрещённый элемент:', evt.item);
    }
});

Элементы с классом .no-drag не будут перемещаться, но событие onFilter позволит выполнить дополнительные действия, например, показать уведомление.

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

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

function logUpdate(evt) {
    console.log('Элемент обновлён:', evt.item);
}

sortable.option("onUpdate", logUpdate);

// В дальнейшем отключение события:
sortable.option("onUpdate", null);

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

Группы списков и обмен элементами

SortableJS позволяет объединять несколько списков в группы, что открывает возможности drag-and-drop между ними. Важную роль играют события onAdd и onRemove:

const listA = document.getElementById('listA');
const listB = document.getElementById('listB');

Sortable.create(listA, {
    group: 'shared',
    animation: 150,
    onAdd: function (evt) {
        console.log('Элемент добавлен в список A:', evt.item.textContent);
    }
});

Sortable.create(listB, {
    group: 'shared',
    animation: 150,
    onRemove: function (evt) {
        console.log('Элемент удалён из списка B:', evt.item.textContent);
    }
});

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

onMove: function (evt) {
    if (evt.to.id === 'listB' && evt.item.dataset.type !== 'allowed') {
        return false; // запрещает перемещение
    }
    return true;
}

Пользовательские анимации и визуальная обратная связь

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

const sortable = new Sortable(el, {
    animation: 200,
    ghostClass: 'ghost', // класс для перемещаемого элемента
    chosenClass: 'chosen', // класс для элемента в момент захвата
});

Использование этих классов позволяет интегрировать перетаскивание с существующей CSS-анимацией или эффектами.

Резюме

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

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

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

Оглавление