用React实现一个漂亮的可拖放的列表——react-beautiful-dnd!

介绍

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


用React实现一个漂亮的可拖放的列表——react-beautiful-dnd!


Github

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

核心特征

  • 很自然优美的动画效果
  • 无障碍:强大的键盘和屏幕阅读器支持♿️
  • 性能出色
  • 简洁而强大的api,易于上手
  • 与标准的浏览器交互非常友好
  • 简约风格
  • 无需创建其他包装dom节点-友好的flexbox和焦点管理!
  • 用React实现一个漂亮的可拖放的列表——react-beautiful-dnd!

    当前支持的功能集合

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

    说在后面

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

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

    人已赞赏
    技术博文

    LinCMS,一款适合程序员的优雅纯粹的CMS Blog!

    2020-8-11 12:28:25

    技术博文

    国人开源精品,基于 Python 的在线文档系统——MrDoc

    2020-8-14 12:00:20

    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索