天天看點

簡單又好用的8款前端拖拽排序庫

作者:Echa攻城獅

大家好,我是 Echa。

今天來推薦 8 個簡單又好用的前端拖拽排序庫!

1. React Beautiful Dnd

react-beautiful-dnd 這是一款美觀且簡單易用的 React 清單拖拽庫。其動畫效果自然,性能優秀,簡潔而強大的 API,易于上手,與标準浏覽器的互動性非常好。

簡單又好用的8款前端拖拽排序庫

Github(⭐️ 27.5k):https://github.com/atlassian/react-beautiful-dnd

2. Sortable

Sortable 是一個 JavaScript 拖拽庫,用于在現代浏覽器和觸摸裝置上對拖放清單進行重新排序。支援 Meteor、AngularJS、React、Polymer、Vue、Ember、Knockout 和任何 CSS 庫。

簡單又好用的8款前端拖拽排序庫

Github(⭐️ 25.3k):https://github.com/SortableJS/Sortable

3. Dragula

Dragula 是一個 JavaScript 庫,實作了網頁上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。

簡單又好用的8款前端拖拽排序庫

Github(⭐️ 21.3k):https://github.com/bevacqua/dragula

4. React DnD

React DnD是 React 和 Redux 核心作者 Dan Abramov 創造的一組React 高階元件,可幫助我們建構複雜的拖放界面,同時保持元件解耦。它可以在應用程式的不同部分之間通過拖動傳輸資料,并且元件會更改其外觀和應用狀态以響應拖放事件。

簡單又好用的8款前端拖拽排序庫

Github(⭐️ 18k):https://github.com/react-dnd/react-dnd

5. Vue.Draggable

Vue.Draggable 是基于 Sortable.js 的 Vue 拖放元件。它允許拖放和視圖模型數組同步,基于并提供 Sortable.js 的所有功能。該庫适用于Vue 2,如果想在 Vue 3 中使用該庫,可以通路:https://github.com/SortableJS/vue.draggable.next。

簡單又好用的8款前端拖拽排序庫

Github(⭐️ 17.7k):https://github.com/SortableJS/Vue.Draggable

6. interact.js

interact.js 是一個适用于現代浏覽器的 JavaScript 拖放庫,支援調整大小和多點觸控手勢,具有慣性和捕捉功能。為了盡可能多地提供控制,它嘗試提供一個簡單、靈活的API,該 API 提供移動元素所需的所有拖拽API。

簡單又好用的8款前端拖拽排序庫

Github(⭐️ 11k):https://github.com/taye/interact.js

7. React Draggable

React-Draggable 庫簡單易用,将 CSS 中的transform應用于 React 元件,允許我們在 UI 中拖動元件。它有不同的 props 可以讓你改變元件的行為,是建立直覺、使用者友好界面的絕佳選擇。

簡單又好用的8款前端拖拽排序庫

Github(⭐️ 7.7k):https://github.com/react-grid-layout/react-draggable

8. React Sortable Tree

React Sortable Tree 是一個用于對分層資料進行拖放式可排序表示的React元件。它支援單選多選,滑鼠拖拽子集到新合集,模糊搜尋等。

簡單又好用的8款前端拖拽排序庫

Github(⭐️ 4.5k):https://github.com/frontend-collective/react-sortable-tree

繼續閱讀