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!

    "/<table>


    分享到:


    相關文章: