Vue Dragula是一個基于vue.js框架的拖放庫，使用它可以輕松地實現頁面元素的拖放效果。該庫基于DataTables，提供了很多可用的API和事件監聽，使它更加靈活和適應不同的需求。下面我們來看一下如何使用Vue Dragula。

首先，我們需要安裝Vue Dragula庫，可以通過npm來安裝：

npm install vue-dragula --save

安裝完成后，在Vue項目中需要注冊Vue Dragula組件。在main.js文件中引入Vue Dragula：

import VueDragula from 'vue-dragula';
Vue.use(VueDragula);

接下來，就可以在Vue組件中使用Vue Dragula了。例如，在頁面中需要拖動一個列表，先在template中設置好需要拖放的列表：

<ul class="list">
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

然后在script中設置好需要拖放的元素：

export default {
data() {
return {
list: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
}
},
mounted() {
this.$nextTick(() => {
let drake = this.$dragula.find('.list')
drake.on('dragend', (el) => {
console.log('dragend:', el);
});
});
}
}

這個例子中，我們使用了$dragula來綁定需要拖放的元素。在mounted函數中，我們監聽了dragend事件，當拖放結束時，會在控制臺輸出被拖放的元素信息。目前Vue Dragula支持drag，dragend，drop等事件。

上面是一個簡單的使用Vue Dragula的例子，Vue Dragula提供了非常靈活的API和事件監聽，可以根據不同的需求進行自定義操作。如果你需要實現頁面元素拖放效果，Vue Dragula是一個不錯的選擇，你可以去了解一下。