Vue.Draggable - 基於 Vue.js 絲般柔滑的拖拽排序組件

2020-12-13 那些免費的磚

截止發稿2020年8月10日，這可能是目前最好的拖拽排序解決方案了。

介紹

VueDraggable 是一個專門解決拖拽排序和拖拽分組的前端開原始碼庫。

在 jQuery 的時代，有很多動效非常流暢絲滑的拖拽排序插件，但在國內 Vue.js 起來後，卻比較難找到一款像 Sortable.js 那樣的組件，而 Vue.Draggable 就是一款基於 Sortable.js 開發的 Vue 增強組件。

官網例子演示

Vue.Draggable demo

特點

支持觸摸設備，支持智能滾動；支持拖拽和選擇文本以及不同列表之間的拖拽；拖拽和視圖模型同步刷新，兼容Vue 2.0 的過渡動畫；支持撤銷操作，需求定製性高。使用體驗

數據綁定視圖、動畫流暢、使用簡單、改變可追溯、API強大， Vue.Draggable 幾乎滿足拖拽功能的所有需求，支持 cdn 直接引入js文件，支持 Vue cli 方式引入。官網有很詳細的文檔以及非常充足的代碼例子，上手非常容易。

Vue.Draggable 是一個非常活躍的項目，由眾多前端參與維護。

參與維護的開發者

另外 Vue.Draggable 作為一個增強組件，完全兼容開發者使用的 UI 庫組件，比如 Ant Design、Element ，並使用 tag 和 componentData 使這些組件可拖動，瞬間變成一個可拖拽容器。

我使用 Sortable.js 以及 VueDraggable 做了不少項目了，大膽目測這應該是目前最好用的前端拖拽的解決方案。

免費使用說明

VueDraggable 已經在 github 開源，可以自由下載學習和免費使用。由於官網國內無法訪問，因此這裡放的是 github 的連結。不過需要注意，對於 Vue 2.0 而言，它是 vuedraggable，而不是版本Vue 1.0 的 vue-draggable。

本專欄已建立同名網站，同步更新設計、前端圈免費開源、可商用資源。

相關焦點

  • 【Vue.js入門到實戰教程】11-Vue Loader(下)| 編寫一個單文件 Vue 組件
    然後在 src/main.js 中引入 Bootstrap 的腳本和樣式文件：import Vue from 'vue'import App from '.編寫 ModalExample 組件我們將 vue_learning/component/slot.html 中的 modal-example 組件拆分出來，在 vue_learning/demo-project/src/components 目錄下新建一個單文件組件 ModalExample.vue，將 modal-example 組件代碼按照 Vue Loader 指定的格式填充到對應位置
  • 推薦8 個漂亮實用的 vue.js 進度條組件
    為大家精心挑選了 8 個漂亮的 Progress Bars 組件，並附上 GitHub 連結和 vue.js 代碼示例，以及Vue3 快速深入全攻略。1.easy-circular-progress一個簡單的循環進度組件，帶有計數效果。
  • Vue-使用vue-video-player組件
    在實際開發過程中會有添加視頻的需求在vue項目中添加視頻可以使用vue-video-player組件來實現實現步驟:1.安裝在控制臺輸入: npm install vue-video-player –s
  • HTML5 拖放API與Vue.js實戰
    在本文中我們將用 Vue.js 構建一個簡單的看板應用。看板是一種項目管理工具，使用戶可以從頭到尾直觀地管理項目。Trello、Pivotal Tracker 和 Jira 等工具都屬於看板應用。所以需要創建三個 Vue 組件：一個用於列，一個用於卡片，最後一個用於創建新卡片。創建 card 組件先來創建 card 組件。在 /component 目錄中創建一個新文件 Card.vue。
  • Vue基礎及常用UI組件庫簡介
    /2.5.17-beta.0/vue.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script><script type="text/javascript"> new Vue({
  • 史上最全:Vue 相關開源項目庫匯總
    UI組件element ★13489 - 餓了麼出品的Vue2的web UI工具套件Vux ★8133 - 基於Vue和WeUI的組件庫iview ★6634 - 基於 Vuejs 的開源 UI 組件庫mint-ui ★6253 - Vue 2的移動UI元素muse-ui ★3705 - 三端樣式一致的響應式 UI 庫
  • Vue.js布局
    動態Vue.js布局組件前言vue.js是漸進增強的視圖庫，可以作為.html頁面部分使用，也可以結合vue-router、vuex、axios用來構建單頁面或多頁面應用。
  • Vue.js 很難學?看看這個由 DCloud 與 Vue 官方合作推出的免費入門...
    Vue.js 是目前國內很火的前端框架，前端工程師招聘幾乎都要求掌握。如果你想開始嘗試學習 Vue.js，在 Vue.js 官網閱讀文檔教程又比較吃力，這套視頻教程基於Vue.js 官網文檔，用更加通俗易懂的方式和代碼實例來幫助你入門 Vue.js 。
  • 「Vue.js開發連載一」Vue.js簡介
    一、簡介Vue.js（讀音 /vju/，類似於view）是一個構建數據驅動的web界面的漸進式框架。Vue。js的目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件。它不僅易於上手，還便於與第三方庫或既有項目整合。
  • Vue Loader 篇(下):編寫一個單文件 Vue 組件
    然後在 src/main.js 中引入 Bootstrap 的腳本和樣式文件：import Vue from 'vue'import App from '.編寫 ModalExample 組件我們將 vue_learning/component/slot.html 中的 modal-example 組件拆分出來，在 vue_learning/demo-project/src/components 目錄下新建一個單文件組件 ModalExample.vue，將 modal-example 組件代碼按照 Vue Loader 指定的格式填充到對應位置
  • 【項目推薦】Vue.js
    【編者按】vue 是法語中視圖的意思，Vue.js 是一個輕巧、高性能、可組件化的 MVVM 庫，同時擁有非常容易上手的 API。
  • 在 Vue.js 中集成 CSS 框架
    npm install --save popper.js這樣 Bootstrap 4 就被集成到 Vue 重了。安裝併集成 BulmaBulma 一個是基於 Flexbox 的輕巧靈活的 CSS 框架。
  • Vue.js——60分鐘組件快速入門(上篇)
    #app是Vue實例掛載的元素，應該在掛載元素範圍內使用組件-->            <my-component></my-component>        </div>    </body>    <script src="js/vue.js"></script>
  • vue中組件的使用(下)
    組件系統是vue的一個重要概念。利用它，我們可以將一個大型應用項目簡化成若干層和若干個小的組件模塊，使項目和代碼結構都更加清晰明確，同時這也對項目開發效率和維護成本提供了很有利的幫助。;div>這樣的容器標籤，因為vue規定每個組件必須只有一個根元素。
  • Vue2.0父子組件間通信
    運行環境搭建Vue引入方式一般有三種：第一種CDN引入<script src="[https://cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue)"></script>第二種使用 NPM 安裝$ npm install vue//安裝最新穩定版第三種搭建腳手架
  • Vue面試題(3)Vue-Router和Vuex
    題目選於多篇文章，又重新整理、整合、排序，再此一併感謝。收集材料時有的忽略了標註來源，如原作者希望標出來源，請聯繫小編。1、請介紹一下你對vuex的理解？Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。每一個 Vuex 應用的核心就是 store（倉庫）。「store」 基本上就是一個容器，它包含著你的應用中大部分的狀態 ( state )。
  • Vue.js:60分鐘組件快速入門(上篇)
    #app是Vue實例掛載的元素，應該在掛載元素範圍內使用組件-->            <my-component></my-component>        </div>    </body>    <script src="js/vue.js"></script>
  • Vue.js最佳實踐(五招讓你成為Vue.js大師)
    如果有人需要Vue.js入門系列的文章可以在評論區告訴我，有空就給你們寫。對大部分人來說，掌握Vue.js基本的幾個API後就已經能夠正常地開發前端網站。但如果你想更加高效地使用Vue來開發，成為Vue.js大師，那下面我要傳授的這五招你一定得認真學習一下了。
  • Vue.js以業務為中心的常見面試題
    在vue.js中的MVVM模式：vue.js是通過數據驅動的，vue.js實例化對象將dom和數據進行綁定，一旦綁定，dom和數據將保持同步，每當數據發生變化，dom也會隨著變化；ViewModel是Vue.js的核心，它是Vue.js的一個實例。
  • Vue.js 父子組件通信的十種方式
    面試官：Vue 中父子組件通信有哪些方式？自己先想一分鐘。無可否認，現在無論大廠還是小廠都已經用上了 Vue.js 框架，簡單易上手不說，教程詳盡，社區活躍，第三方套件還多。真的是前端開發人員必備技能。而且在面試當中也往往會問到關於 Vue 方面的各種問題，其中大部分面試官會問到如上這種問題。