介紹
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>
閱讀更多 最美分享Coder
的文章
關鍵字:
2019科技之光
HTML5
實現