Vue Draggable 是一個基于 Vue.js 和 Sortable.js 的輕量級可拖拽組件，可以輕松實現拖拽排序、拖拽交換以及新增/刪除的功能。在這篇文章中，我們將介紹如何使用 Vue Draggable 組件。

首先，我們需要安裝 Vue Draggable，使用 npm install 命令可以輕松安裝：

npm install vuedraggable --save

安裝完畢后，我們需要在 main.js 文件中引入組件：

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

接下來，我們可以在組件中使用 vuedraggable：

<template>
<div>
<draggable v-model="list">
<div v-for="item in list" :key="item">
{{ item }}
</div>
</draggable>
</div>
</template>
<script>
export default {
data () {
return {
list: ['apple', 'banana', 'cherry', 'durian']
}
}
}
</script>

我們可以看到，我們的組件中使用了 v-model，可以輕松實現數據的雙向綁定。draggable 組件包含了一個列表（如上方代碼中的 list）和一個缺省插槽。這個列表可以是任何類型的元素，只要使用 v-for 呈現即可。缺省插槽可以包含任何組件或 HTML 元素，用于呈現列表項。

除了 v-model，vuedraggable 還提供了許多其他的功能，例如在列表項之間移動時執行回調函數、設置列表項的 class 名稱等。您可以在該組件的官網上找到更多的信息和示例。