React 拖拽辅助库选型求推荐?

查看 19|回复 0
作者:WangLiCha   
先说下实际的场景需求,是 flex 布局下允许换行的不定长短的标签列表(类似 V2EX 首页最下面的节点导航),要求可以通过拖拽进行排序,可以从外部拖拽元素添加到指定的位置(这个“外部”可能是自己定义的 React 元素或者 Ant Design 的 Tree 组件的一个节点,不过节点这个不强求)。同时只有特定的排序或者插入的顺序是允许的,不能允许用户插入或者交换到不合法的位置(比如说所有的标签都是英文单词,然后规定是所有首字母相同的单词必须是互相挨在一起的)。同时每个标签自己还有自己的点击事件,拖拽功能不能和点击事件冲突。
调研过了几个可能比较流行的拖拽库,dnd-kit, react-beautiful-dnd, react-sortable-hoc, react-dnd 。前面三个都是封装的很好比较易用也很好看的库,但是同时存在的问题是他们要么仅支持单列列表的拖拽排序,要么可以支持多行但是仅限大小相同的网格。react-dnd 相比之下最抽象也最底层,只做了逻辑上的辅助,所有的 UI 效果要自己来。他的官方文档上有一个例子可以粗浅的实现我希望的效果,通过判断一个元素是否拖拽到另一个元素上来判断,理论上可以兼容任何布局,但是实际操作起来灵活性很差,在判定点边界的时候很容易反复判定拖拽到不同的元素上从而反复鬼畜。用起来感觉实际用户体验也远不如前面三个。
所以还有什么适合我这个需求的 React 辅助拖拽库吗?还是这个需求太奇葩了只能在 react-dnd 的基础上自己想想办法?
您需要登录后才可以回帖 登录 | 立即注册

返回顶部