写了一个简单、灵活的React标签组件

发布时间:2019-06-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了写了一个简单、灵活的React标签组件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

React Draggable Tags

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

而且,它不仅仅是标签组件,如果你做web项目时需要实现类似的拖拽功能,都可以用它!

觉得我可以说它是目前最好的同类组件。(当然有没有bug不好说,还需要大家共同测试完善,有问题欢迎给我提issue)

文档和demo地址见:https://github.com/YGYOOO/rea... (顺便求star XD)

现已支持手机端

安装

npm install react-draggable-tags --save

示例:
拖动、添加、删除等基本操作:

写了一个简单、灵活的React标签组件

“跨区域“拖拽:

写了一个简单、灵活的React标签组件

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

写了一个简单、灵活的React标签组件

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

写了一个简单、灵活的React标签组件

脚本宝典总结

以上是脚本宝典为你收集整理的写了一个简单、灵活的React标签组件全部内容,希望文章能够帮你解决写了一个简单、灵活的React标签组件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。