建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是 CUGGZ。
目前累計服務客戶上千，積累了豐富的產品開發(fā)及服務經驗。以網(wǎng)站設計水平和技術實力，樹立企業(yè)形象，為客戶提供成都網(wǎng)站設計、成都網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設計、網(wǎng)絡營銷、VI設計、網(wǎng)站改版、漏洞修補等服務。創(chuàng)新互聯(lián)公司始終以務實、誠信為根本，不斷創(chuàng)新和提高建站品質，通過對領先技術的掌握、對創(chuàng)意設計的研究、對客戶形象的視覺傳遞、對應用系統(tǒng)的結合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進步。
今天來推薦 8 個簡單又好用的前端拖拽排序庫！
1、React Beautiful Dnd
react-beautiful-dnd 是一款美觀且簡單易用的 React 列表拖拽庫。其動畫效果自然，性能優(yōu)秀，簡潔而強大的 API，易于上手，與標準瀏覽器的互動性非常好。
Github（?? 27.5k）：https://github.com/atlassian/react-beautiful-dnd。
2、Sortable
Sortable 是一個 JavaScript 拖拽庫，用于在現(xiàn)代瀏覽器和觸摸設備上對拖放列表進行重新排序。支持 Meteor、AngularJS、React、Polymer、Vue、Ember、Knockout 和任何 CSS 庫。
Github（?? 25.3k）：https://github.com/SortableJS/Sortable。
3、Dragula
Dragula 是一個 JavaScript 庫，實現(xiàn)了網(wǎng)頁上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。
Github（?? 21.3k）：https://github.com/bevacqua/dragula。
4、React DnD
React DnD是 React 和 Redux 核心作者 Dan Abramov 創(chuàng)造的一組React 高階組件，可幫助我們構建復雜的拖放界面，同時保持組件解耦。它可以在應用程序的不同部分之間通過拖動傳輸數(shù)據(jù)，并且組件會更改其外觀和應用狀態(tài)以響應拖放事件。
Github（?? 18k）：https://github.com/react-dnd/react-dnd。
5、Vue.Draggable
Vue.Draggable 是基于 Sortable.js 的 Vue 拖放組件。它允許拖放和視圖模型數(shù)組同步，基于并提供 Sortable.js 的所有功能。該庫適用于Vue 2，如果想在 Vue 3 中使用該庫，可以訪問：https://github.com/SortableJS/vue.draggable.next。
Github（?? 17.7k）：https://github.com/SortableJS/Vue.Draggable。
6、interact.js
interact.js 是一個適用于現(xiàn)代瀏覽器的 JavaScript 拖放庫，支持調整大小和多點觸控手勢，具有慣性和捕捉功能。為了盡可能多地提供控制，它嘗試提供一個簡單、靈活的API，該 API 提供移動元素所需的所有拖拽API。
Github（?? 11k）：https://github.com/taye/interact.js。
7、React Draggable
React-Draggable 庫簡單易用，將 CSS 中的transform應用于 React 組件，允許我們在 UI 中拖動組件。它有不同的 props 可以讓你改變組件的行為，是創(chuàng)建直觀、用戶友好界面的絕佳選擇。
Github（?? 7.7k）：https://github.com/react-grid-layout/react-draggable。
8、React Sortable Tree
React Sortable Tree 是一個用于對分層數(shù)據(jù)進行拖放式可排序表示的React組件。它支持單選多選，鼠標拖拽子集到新合集，模糊搜索等。
Github（?? 4.5k）：https://github.com/frontend-collective/react-sortable-tree。
文章標題：簡單好用的前端拖拽排序庫
鏈接地址：http://m.fisionsoft.com.cn/article/dhcgcsd.html
