React一个漂亮的拖动列表实现,react-beautiful-dnd

介绍

react-beautiful-dnd(rbd)是一个使用React实现的美观的拖放列表,该项目虽然只是单纯的针对拖放列表的实现,但是其star数却高达19.9K之多,可见它一定有什么过人之处!




Github

https://github.com/atlassian/react-beautiful-dnd

核心特征

很自然优美的动画效果无障碍:强大的键盘和屏幕阅读器支持♿️性能出色简洁而强大的api,易于上手与标准的浏览器交互非常友好简约风格无需创建其他包装dom节点-友好的flexbox和焦点管理!


当前支持的功能集合

垂直列表 ↕水平列表 ↔列表之间的移动(▤ ↔ ▤)虚拟列表支持 -以60fps的速度解锁10,000个项目合并鼠标 键盘 ♿️ 和触摸 (移动设备,平板电脑等)支持多拖动支持令人难以置信的屏幕阅读器支持 ♿️ -开箱即用的屏幕阅读器提供了绝佳的体验 。为需要的人提供全面的定制控制和国际化支持有条件的拖动和有条件的放置一页上有多个独立列表灵活的项目尺寸-可拖动的项目可以具有不同的高度(垂直列表)或宽度(水平列表)拖动期间添加和删除项目与标签<table>重排兼容- 表模式自动滚动 -拖动时根据需要自动滚动容器和窗口(即使使用键盘也是如此))自定义拖动手柄-可以拖动整个项目的一部分能够在拖动时将拖动的项目移动到另一个元素- 父级化<draggable>创建脚本化的拖放体验 允许扩展支持您喜欢的任何输入类型通过@atlaskit/tree包提供树支持一个<droppable>列表可以滚动容器(没有父级滚动)或者成为滚动容器的子代(也没有一个滚动的父母)独立的嵌套列表-列表可以是另一个列表的子级,但是您不能将项目从父级列表拖到子级列表中与服务器端呈现(SSR)兼容默认情况下,可与嵌套的交互式元素一起很好地交互



说在后面

有很多库允许在React中进行拖放交互。其中最值得注意的是react-dnd。它在提供大量的拖放原语方面做得非常出色,与原始不一致的html5拖放功能配合使用特别好。react-beautiful-dnd是专门为列表(垂直,水平,列表之间的移动,嵌套列表等)构建的更高级别的抽象。在该功能子集中,react-beautiful-dnd提供了强大,自然和优雅的拖放体验。但是,它没有提供react-dnd提供的功能的广度。

PS:以上内容来源于官方文档的翻译,如有不理解的地方可参考Github上的文档,作者还提供了专门的教程资源来帮助你使用它!enjoy it!

"/<table>