阅读 1081

一个可拖拽的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复制代码

示例:

拖动、添加、删除:


跨区域拖拽:


在一个标签里可以放任何东西,甚至。。。放一堆标签,以实现多层标签:


你几乎可以对这些标签做任何你想做的事,比如对它们进行排序:


当然列表形式也是可以的:



关注下面的标签,发现更多相似文章
评论