Распространённые ошибки

Неправильная инициализация

Одной из наиболее частых ошибок является неправильное создание экземпляра Sortable. Важно помнить, что конструктор библиотеки требует переданный DOM-элемент или селектор, который существует на момент вызова. Ошибки проявляются, когда:

  • Селектор не соответствует ни одному элементу.
  • Элемент ещё не добавлен в DOM, например, инициализация происходит до завершения загрузки страницы.
  • Передан не элемент, а массив или строка без точного указания селектора.

Правильная инициализация выглядит так:

import Sortable from 'sortablejs';

const list = document.getElementById('my-list');
Sortable.create(list, {
    animation: 150
});

Если list равен null, библиотека выдаст ошибку, а функционал работать не будет.

Ошибки с событиями

SortableJS предоставляет большое количество событий: onStart, onEnd, onAdd, onUpdate и другие. Частая ошибка — неправильная привязка событий или ожидание их синхронного выполнения. Например:

Sortable.create(list, {
    onEnd: function(evt) {
        console.log('Элемент перемещён', evt.item);
    }
});

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

Игнорирование ограничения сортировки

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

Sortable.create(list1, {
    group: { name: 'shared', pull: true, put: false }
});

Sortable.create(list2, {
    group: 'shared'
});

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

Неправильное использование draggable

Опция draggable ограничивает, какие элементы внутри контейнера могут быть перетаскиваемыми. Ошибка возникает, когда селектор указан некорректно или конфликтует со структурой DOM:

Sortable.create(list, {
    draggable: '.item' // Элементы должны иметь класс 'item'
});

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

Игнорирование анимации и производительности

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

  • Увеличить animation до 150–300 мс.
  • Использовать forceFallback: true для более стабильной работы на старых устройствах.
  • Минимизировать количество событий, обрабатываемых при каждом движении.

Несоответствие модели данных и DOM

Самая частая ошибка в сложных приложениях — несовпадение состояния массива данных и порядка элементов в DOM после сортировки. Если обновлять только DOM, модель данных будет неконсистентной. Например:

Sortable.create(list, {
    onEnd: function(evt) {
        // Ошибка: не обновляется массив данных
        console.log('Элемент перемещён');
    }
});

Правильный подход:

let items = ['A', 'B', 'C'];

Sortable.create(list, {
    onEnd: function(evt) {
        const movedItem = items.splice(evt.oldIndex, 1)[0];
        items.splice(evt.newIndex, 0, movedItem);
    }
});

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

Проблемы с мобильными устройствами

На мобильных устройствах часто возникают проблемы с тач-событиями. Ошибки проявляются, когда:

  • Не используется touchStartThreshold, и перетаскивание срабатывает слишком рано.
  • Игнорируется fallbackOnBody для элементов, которые могут выходить за границы контейнера.
  • Не предусмотрено отключение скролла во время перетаскивания.

Правильная настройка для мобильных устройств:

Sortable.create(list, {
    animation: 200,
    fallbackOnBody: true,
    swapThreshold: 0.65
});

Конфликты с другими библиотеками

SortableJS может конфликтовать с библиотеками, которые тоже управляют DOM или событиями мыши/тача. Ошибки проявляются как невозможность перетащить элемент или дергание при перемещении. В таких случаях важно:

  • Проверить порядок подключения скриптов.
  • Использовать forceFallback или отключать ненужные события сторонних библиотек на время перетаскивания.
  • Не модифицировать DOM вне событий Sortable во время перемещения элементов.

Пропуск очистки

Если динамически создаются и удаляются списки, не вызывается метод destroy() для старых экземпляров. Это приводит к утечкам памяти и ошибкам перетаскивания. Пример корректного удаления:

const sortableInstance = Sortable.create(list);
...
sortableInstance.destroy(); // освобождение ресурсов

Ошибки с сортировкой вложенных списков

SortableJS поддерживает вложенные списки, но ошибки возникают при:

  • Не указанных group для внутренних списков.
  • Неправильной настройке draggable для вложенных элементов.
  • Использовании одинаковых handle на разных уровнях, что приводит к неожиданному поведению.

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

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

Оглавление