一个可拖拽的React标签组件

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

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

因而我就干脆本身写了一个：

React Draggable Tags

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

实际上，不单单是标签，不少须要相似拖拽功能的情景均可以使用它。

文档和demo地址见：https://github.com/YGYOOO/react-draggable-tags （顺便求star XD）（一开始花了一个下午写好的，因此有些bug，如今应该比较稳定了。若是有，欢迎提issue XD）

更新：现已支持手机端！

安装

npm install react-draggable-tags --save复制代码

示例：

拖动、添加、删除：

跨区域拖拽：

在一个标签里能够听任何东西，甚至。。。放一堆标签，以实现多层标签：

你几乎能够对这些标签作任何你想作的事，好比对它们进行排序：

固然列表形式也是能够的：