Vue Draggable Move是一個(gè)方便實(shí)用的插件集，可以幫助您實(shí)現(xiàn)移動(dòng)排序、拖拽移動(dòng)、列表拖拽等功能。下面我們來(lái)了解一下它的具體用法。

首先，我們需要引入Vue Draggable Move插件，并在Vue實(shí)例中進(jìn)行注冊(cè)。

npm install vue-draggable-move

import Vue from 'vue'
import draggable from 'vuedraggable'
Vue.component('dragable', draggable)

接下來(lái)，我們可以在組件中使用該插件，并設(shè)置相關(guān)的參數(shù)。例如，在以下代碼中，我們通過(guò)設(shè)置animationDuratuion參數(shù)來(lái)控制移動(dòng)動(dòng)畫的時(shí)長(zhǎng)。

<template>
<draggable
v-model="myList"
animationDuration="400"
@change="onSort"
>
<div
v-for="(item, index) in myList"
:key="index"
class="list-item"
>
{{ item }}
</div>
</draggable>
</template>
<script>
export default {
data() {
return {
myList: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']
}
},
methods: {
onSort() {
console.log(this.myList)
}
}
}
</script>

除了控制移動(dòng)動(dòng)畫的時(shí)長(zhǎng)之外，還可以通過(guò)其他參數(shù)控制拖拽移動(dòng)、列表拖拽等功能的實(shí)現(xiàn)。此外，還可以通過(guò)其他事件監(jiān)聽(tīng)函數(shù)來(lái)處理拖拽排序后的回調(diào)函數(shù)等邏輯。

綜上所述，Vue Draggable Move插件集是一個(gè)方便實(shí)用的工具，可用于實(shí)現(xiàn)各種移動(dòng)排序、拖拽移動(dòng)、列表拖拽等功能，可以大大提高工作效率。