Vue 綜合了 Angualr 和 React 的優(yōu)點(diǎn)，因其易上手，輕量級(jí)，受到了廣泛應(yīng)用。成為了是時(shí)下火熱的前端框架，吸引著越來(lái)越多的前端開(kāi)發(fā)者！

本文將通過(guò)一個(gè)最簡(jiǎn)單的拖拽例子帶領(lǐng)大家快速上手 Vue 組件 Vue-Draggable。

首先，需要在工作環(huán)境中配置好 Vue-cli，創(chuàng)建一個(gè) vue 項(xiàng)目。

vue create test_1

創(chuàng)建項(xiàng)目時(shí)會(huì)有很多安裝步驟，按下面的說(shuō)明選擇配置：

1.pick a preset 選擇 Manually select features

2.Check the features needed for your project 選擇 Babel 和 CSS Pre-processors 兩項(xiàng)（使用空格鍵來(lái)選中或取消）

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 ，并填寫(xiě)一個(gè)名字，以后的 Vue 項(xiàng)目就可以繼續(xù)使用這個(gè)配置

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

OK，準(zhǔn)備工作做好，下面我們可以進(jìn)入 Vue-Draggable 的內(nèi)容。

首先， cd test_1 進(jìn)入項(xiàng)目目錄，配置一下 Vue-Draggable。

npm i vuedraggable -S

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

在 <script> 中引入并且注冊(cè) vuedraggable 組件,再寫(xiě)一點(diǎn)數(shù)據(jù)后面驗(yàn)證用：

<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 標(biāo)簽中，tag = ‘ul’ 用來(lái)指定 draggable 組件渲染出來(lái)的 html 標(biāo)簽。v-model 綁定列表可拖動(dòng)的元素，也就是 data() 中的 list，通常與 draggable 中的內(nèi)部元素 v-for 的引用一致。

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

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

再配置一下對(duì)應(yīng) 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 注冊(cè)組件:

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

啟動(dòng)項(xiàng)目，在瀏覽器中查看一下效果！

npm run server

很簡(jiǎn)單對(duì)吧，10 分鐘快速食用完畢！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。