Vue 綜合了 Angualr 和 React 的優點，因其易上手，輕量級，受到了廣泛應用。成為了是時下火熱的前端框架，吸引著越來越多的前端開發者！

本文將通過一個最簡單的拖拽例子帶領大家快速上手 Vue 組件 Vue-Draggable。

首先，需要在工作環境中配置好 Vue-cli，創建一個 vue 項目。

vue create test_1

創建項目時會有很多安裝步驟，按下面的說明選擇配置：

1.pick a preset 選擇 Manually select features

2.Check the features needed for your project 選擇 Babel 和 CSS Pre-processors 兩項（使用空格鍵來選中或取消）

3.Pick a CSS pre-processor 選擇 Sass/SCSS(with node-sass)

4.Where do you prefer placing config 選擇 In dedicated config files

5.Save this as a preset for future projects？ 選 yes ，并填寫一個名字，以后的 Vue 項目就可以繼續使用這個配置

6. Pick the package manager to use when installing dependencies 選擇 Use NPM（有些同學安裝可能不會遇到這步）

OK，準備工作做好，下面我們可以進入 Vue-Draggable 的內容。

首先， cd test_1 進入項目目錄，配置一下 Vue-Draggable。

npm i vuedraggable -S

接著,在 src/components 目錄下新建 Draggable.vue。

在 <script> 中引入并且注冊 vuedraggable 組件,再寫一點數據后面驗證用：

<script> import Draggable from "vuedraggable"const message = ["vue.draggable","draggable","component","for","vue.js 2.0","based","on","Sortablejs" ]export default {components: {Draggable},data () {return {list: message.map((name, index) => {return { name, order: index + 1 };})}} } </script>

然后我們就可以在 中愉快的使用 draggable。

<template><draggableclass="list-group"tag="ul"v-model="list"v-bind="{animation: 200,group: 'description',disabled: false,ghostClass: 'ghost'}"><liclass="list-group-item"v-for="element in list":key="element.order">{{ element.name }}</li></draggable> </template>

注意，draggable 標簽中，tag = ‘ul’ 用來指定 draggable 組件渲染出來的 html 標簽。v-model 綁定列表可拖動的元素，也就是 data() 中的 list，通常與 draggable 中的內部元素 v-for 的引用一致。

v-bind 綁定 draggable 組件的配置項，可以看看具體講解：

• group：string or object
• string：命名，用處是為了設置可以拖放容器時使用
• object: {name, pull, put}
• name: 同 string 的方法
• pull：pull 用來定義從這個列表容器移動出去的設置，true/false/‘clone’/function
• true:列表容器內的列表元素可以被移出；
• false：列表容器內的列表元素不可以被移出；
• clone：列表元素移出，移動的為該元素的副本；
• function：用來進行 pull 的函數判斷，可以進行復雜邏輯，在函數中 return false/true 來判斷是否移出；
• put：put 用來定義往這個列表容器放置列表元素的的設置，true/false/[‘foo’,‘bar’]/function
• true:列表容器可以從其他列表容器內放入列表元素；
• false：與 true 相反；
• [‘foo’,‘bar’]：這個可以是一個字符串或者是字符串的數組，代表的是 group 配置項里定義的 name 值；
• function：用來進行 put 的函數判斷，可以進行復雜邏輯，在函數中 return false/true 來判斷是否放入
• animation: number 單位：ms，定義動畫的時間；
• disabled: boolean 定義此 sortable 對象是否可用，為 true 時 sortable 對象不能拖放排序等功能，為 false 時為可以進行排序，相當于一個開關；
• ghostClass：selector 格式為簡單 css 選擇器的字符串，當拖動列表元素時會生成一個副本作為影子元素來模擬被拖動元素排序的情況，此配置項就是來給這個影子元素添加一個 class，我們可以通過這種方式來給影子元素進行編輯樣式；
• sort: boolean 定義是否列表元素是否可以在列表容器內進行拖拽排序；
• delay: number 定義鼠標選中列表元素可以開始拖動的延遲時間；
• handle: selector 格式為簡單 css 選擇器的字符串，使列表元素中符合選擇器的元素成為拖動的手柄，只有按住拖動手柄才能使列表元素進行拖動；
• filter: selector 格式為簡單 css 選擇器的字符串，定義哪些列表元素不能進行拖放，可設置為多個選擇器，中間用“,”分隔
• draggable：selector 格式為簡單 css 選擇器的字符串，定義哪些列表元素可以進行拖放
• chosenClass：selector 格式為簡單 css 選擇器的字符串，當選中列表元素時會給該元素增加一個 class；
• forceFallback：boolean 如果設置為 true 時，將不使用原生的 html5 的拖放，可以修改一些拖放中元素的樣式等；
• fallbackClass：string 當 forceFallback 設置為 true 時，拖放過程中鼠標附著元素的樣式；
• scroll：boolean 默認為 true，當排序的容器是個可滾動的區域，拖放可以引起區域滾動。

再配置一下對應 class 樣式：

<style lang="scss"> .ghost {opacity: 0.5;background: #c8ebfb; } .list-group {min-height: 20px;list-style: none; } .list-group-item {cursor: move;height: 30px;line-height: 30px;border: 1px solid #ccc; }</style>

最后，修改一下 App.vue 注冊組件:

<template><div id="app"><draggable></draggable></div> </template><script> import Draggable from './components/Draggable'export default {name: 'app',components: {Draggable} } </script>

啟動項目，在瀏覽器中查看一下效果！

npm run server

很簡單對吧，10 分鐘快速食用完畢！

總結

以上是生活随笔為你收集整理的10 分钟上手 Vue 组件 Vue-Draggable的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。