Draggabilly Vue是基于Vue.js的一種拖拽庫(kù)，它可以為任何元素添加拖拽功能。它使用了Draggabilly和Vue.js的結(jié)合，相當(dāng)于在Draggabilly庫(kù)的基礎(chǔ)上封裝了Vue組件。

在使用Draggabilly Vue之前，我們需要先安裝它并引入它：

npm install draggabilly-vue --save

引入方法：

import DraggabillyVue from 'draggabilly-vue';
Vue.component('draggable', DraggabillyVue);

使用Draggabilly Vue也非常簡(jiǎn)單，在需要添加拖拽功能的元素處使用<draggable>組件即可。比如：

<template>
<div>
<draggable>
這是一個(gè)可拖拽元素
</draggable>
</div>
</template>

通過(guò)設(shè)置一些參數(shù)，可以讓Draggabilly Vue實(shí)現(xiàn)更多的功能。例如添加拖拽限制，可以通過(guò)handle屬性來(lái)指定拖拽的手柄，axis屬性來(lái)限制拖拽方向，containment屬性來(lái)限制拖拽范圍。還可以通過(guò)事件來(lái)獲取拖拽后的位置信息，例如：

<template>
<div>
<draggable @dragEnd="handleDrag">
這是一個(gè)可拖拽元素
</draggable>
</div>
</template>
<script>
export default {
methods: {
handleDrag(event) {
console.log(event.pageX, event.pageY);
}
}
}
</script>

總之，使用Draggabilly Vue可以方便地為界面元素添加拖拽功能，讓頁(yè)面更加靈活和易用。