Draggable為基於Sortable.js的vue元件，用以實現拖拽功能。

具體說明，請參考：https://www.npmjs.com/package/vuedraggable

npm官方演示：

vuedraggable特性：

1. 支援觸控裝置
2. 支援拖拽和選擇文字
3. 支援智慧滾動
4. 支援不同列表之間的拖拽
5. 不以jQuery為基礎
6. 和檢視模型同步重新整理
7. 和vue2的國度動畫相容
8. 支援撤銷操作
9. 當需要完全控制時，可以丟擲所有變化
10. 可以和現有的UI元件相容

使用

安裝：

npm install vuedraggable
 

頁面引入：

import draggable from 'vuedraggable'

data定義資料進行模擬：

<template>
  <div>
    <!-- 呼叫元件  -->
    <draggable element="ul" v-model="listdata">
      <li v-for="item in listdata">{{item.name}}</li>
    </draggable>
    <!-- 展示list資料效果 -->
    {{listdata}}
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'draggabletest',
  components: { 
    draggable,
  },
  data () {
    return {
      listdata:[
        {
          id: 1,
          name: '葉落森1'
        },
        {
          id: 2,
          name: '葉落森2'
        },
        {
          id: 3,
          name: '葉落森3'
        },
        {
          id: 4,
          name: '葉落森4'
        },
        {
          id: 5,
          name: '葉落森5'
        }
      ]
    }
  },
}
</script>