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

Более известным являетсяreact-dnd, однако кажется, что он поддерживает только перемещение элемента в фиксированное положение, мне нужна метка, которую можно перемещать между двумя метками в любой позиции (длина каждой метки не фиксирована, поэтому фиксированной позиции нет. Кроме того , он должен поддерживать несколько строк, поэтому просто списка нескольких перетаскиваемых элементов недостаточно)
Удовлетворение вышеуказанным требованиям являетсяreact-tags, но этот компонент очень негибкий, очень неудобно модифицировать стиль и выполнять какие-то дополнительные операции над меткой, метка должна быть текстовой, а не каким-либо элементом, а "перетаскивание между областями" не поддерживается (см. вторую гифку ниже картинка)

Так что я только что написал один сам:

React Draggable Tags

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

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

Документацию и демонстрационный адрес см.: https://github.com/YGYOOO/react-draggable-tags (кстати, попросите звездочку XD) (Вначале на ее написание ушло полдня, так что есть некоторые ошибки, теперь он должен быть относительно стабильным.Если есть, добро пожаловать в проблему XD)

Обновление: теперь поддерживает мобильные устройства!

Установить

npm install react-draggable-tags --save

Пример:

Перетащите, добавьте, удалите:

Перетащите по регионам:

Во вкладку можно положить что угодно, даже. . . Ставим кучу меток, чтобы добиться многослойности меток:

Вы можете делать с этими тегами все, что хотите, например, сортировать их:

Конечно, возможен и формат списка: