Какие есть библиотеки для создания сортируемых dgar-n-drop листов в React?

Question

[Persotr27]

Здравствуйте. Какие есть библиотеки для создания сортируемых переносных списков, с управлением состояния комопонента-контейнера (самого списка)? Отличнейший пример функционала вот: clauderic.github.io/react-sortable-hoc/#/basic-con...
Но есть один минус, код данной библиотеки больше не поддерживается в современных версиях реакта в StrictMod'e.
React-dnd не совсем подходит, потому что привязан к HTML5, что не позволяет использовать DND на телефонах.
API react-draggable недостаточно для создания списков, на сколько я понял, хотя если ошибаюсь, буду очень рад если укажите каким образом её можно таки заиспользовать для моей цели.
В общем, буду очень благодарен всем за помощь :)

Answer 1

[chakaponi]

Dragula. Вещь старенькая, но хорошая. Не факт что работает с нынешней версией React, нужно пробовать

Comments

[Persotr27]

Да, вещь действительно интересная, но судья по тому, что уже 4 года не выходили обновления, уж точно врядли поддерживается современным реактом) Тем не менее, полезно было ознакомиться. Для ванильных JS приложений со списком без заморочек хорошо подойдет.

Answer 2

[Timur Kostenko]

Попробуй react-beautiful-dnd

Comments

[Persotr27]

Пожалуй, остановил свой выбор именно на этой библиотеке ибо благодаря её функционалу можно создавать красивые стилизованные списки с плавностью, анимацией и прочими заморочками. В целом, разбираться с API и настраивать приложение долго, но оно того стоит) Опять же, только если есть нужда в оч красивом и плавном UI листе. Если же нет, лучше воспользоваться предложенным ниже react-sortablejs. react-beautiful-dnd кстати поддерживает touch event's (react-sortablejs однако тоже)

Answer 3

[kocherman]

Sortable.js - очевидно же!
демо
ES2015+
mixin

Comments

[Persotr27]

Это пожалуй самое универсальное решение. Очень быстро всё настраивается, привыкается, работает и на телефонах. Если нужно создать простой сортируемый лист без стилей, анимаций сортировки и т.п. - самое оно. Единсвтенный минус - напрямую изменяет DOM, за чем нужно следить, ибо будут неожиданности.
Для реакта кстати актуальный репозиторий здесь

[kocherman]

Persotr27, так в dom он меняет только порядок элементов при swap, и когда тянешь из одного списка в другой. А как сделать по другому? Во всей библиотеке метод insertBefore() используется 11 раз. В случаях с реактом, конечно могут появиться лишние вызовы обработчиков событий. Но либа сделана на совесть и с реактом работать может.