В React.js прекрасно все, кроме поддержки драгов из коробки, в частности сортируемого списка. В интернете в основном предлагают вручную обрабатывать события мышки. Однако сделать корректную сортировку длинного списка с учетом скроллов и браузеров довольно сложно, поэтому я прикрутил jQuery UI Sortable, не нарушая реактивности системы.

Воспользуемся генератором вкусных рецептов из старого выпуска и добавим возможность менять шаги в рецепте с помощью перетаскивания.

С React.js даже самый минимальный код все равно довольно большой, поэтому дам ссылки на результат и немного поясню изменения:

• Живое демо (работает даже на телефоне)
• Исходники
• Изменения с предыдущей версии

За таскание отвечает класс Sortable, в который передается функция, рисующая шаг рецепта. Sortable отрисовывает список и навешивает jQuery UI Sortable на элементы. В колбеке stop мы вызываем sortable("cancel") чтобы отменить результат переноса (это очень важно, так как если мы будем вручную менять DOM, то React.js будет ругаться). Далее мы рапортуем главному приложение о изменении состояния, и он уже сам обновляет список через реактивность.

Я постарался изобразить процесс на диаграмме (думаю совершил 33 ошибки в UML, но мне хотелось опробовать сервис draw.io):

Не знаю насколько данное решение готово для использования на продакшене, но для внутренних интерфейсов очень даже ничего.

Tweet