最近的项目里须要实现一个标签组件,内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于react的组件能很好的知足需求。react
较为知名的是 react-dnd,然而它彷佛只支持把一个元素移到固定的位置,我须要的是一个标签能够移动到任意位置的两个标签之间(每一个标签长度不固定,因此没有固定的位置)
知足上述需求的是 react-tags,但该组件很不灵活,想要修改样式、对标签进行一些额外操做很不方便,标签内部必须是文字而不能是任意元素,且不支持“跨区域拖拽”(见下文第二张gif图)
因而我就干脆本身写了一个,我把它叫作:git
它很好用,最短只要几行代码;又很灵活,你能够进行添加、修改、删除、排序等操做,能够在一个标签里听任何东西,能够设置任何你想要的样式(该组件自己并不包含样式)。github
并且,它不单单是标签组件,若是你作web项目时须要实现相似的拖拽功能,均可以用它!web
我以为我能够说它是目前最好的同类组件。(固然有没有bug很差说,还须要你们共同测试完善,有问题欢迎给我提issue)npm
文档和demo地址见:https://github.com/YGYOOO/rea... (顺便求star XD)测试
现已支持手机端spa
安装3d
npm install react-draggable-tags --save
示例:
拖动、添加、删除等基本操做:code
“跨区域“拖拽:blog
在一个标签里能够听任何东西,甚至。。。放一堆标签,以实现多层标签:
你几乎能够对这些标签作任何你想作的事,好比对它们进行排序: