一个可拖拽的React标签组件

最近的项目里需要实现一个标签组件，内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于react的组件能很好的满足需求。

较为知名的是react-dnd，然而它似乎只支持把一个元素移到固定的位置，我需要的是一个标签可以移动到任意位置的两个标签之间（每个标签长度不固定，所以没有固定的位置）
满足上述需求的是react-tags，但该组件很不灵活，想要修改样式、对标签进行一些额外操作很不方便，标签内部必须是文字而不能是任意元素，且不支持“跨区域拖拽”（见下文第二张gif图）

于是我就干脆自己写了一个，我把它叫做：

React Draggable Tags

它很好用，最短只要几行代码；又很灵活，你可以进行添加、修改、删除、排序等操作，可以在一个标签里放任何东西，可以设置任何你想要的样式（该组件本身并不包含样式）。

文档和demo地址：https://ygyooo.github.io/react-draggable-tags

安装

npm install react-draggable-tags --save

示例：

添加删除拖拽等基本操作：

从一个盒子拖拽到另一个盒子：

一个标签里可以放任何东西，甚至。。一堆标签，因而你可以做出类似的多层级标签：

这个组件很灵活，你可以加上任何想要的功能，比如排序：