因為專案一開始用的jquery，所以當時找的拖拽排序外掛是jquery-ui。然後最近想著是不是也可以用vue來做拖拽排序，前期找了幾個，但是好像是不支援v2.0的，然後在思否剛好看到一篇文章，也是講拖拽排序元件的，然後自己就跟著弄下來試了試。

安裝

npm install awe-dnd --save

main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

sortable.vue

<template>
    <div class="color-list">
      <div 
          class
 
="color-item" 
          v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
          :key="color.text"
      >{{color.text}}</div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            colors: [{
                text: "Aquamarine"
 

            },  {
                text: "Skyblue"
            }, {
                text: "Burlywood"
            }]
        }
    },
    //這裡挺重要的，因為我們一般排序完要重新提交排序後的資料給後臺儲存，以便下一次安裝我們所需要的順序顯示，這裡的list就可以幫我們做到這一點，但是我們需要給資料新增一個uniqueId標誌。然後在排序完後或者列表對應的順序和uniqueId提交給後臺，我也不知道我說的咋樣。
    mounted () {
        this
 
.$dragging.$on('dragged', ({ value }) => {
          console.log(value.item)
          console.log(value.list)
          console.log(value.group)
        })
    }
}
</script>
<style>
    .color-item{
        border:1px solid #f1f1f1;
        padding:10px 5px;
        margin:5px 0;
        border-radius: 4px;
    }

</style>

  排序完後的操作挺重要的，因為我們一般排序完要重新提交排序後的資料給後臺儲存，以便下一次安裝我們所需要的順序顯示，這裡的list就可以幫我們做到這一點，但是我們需要給資料新增一個uniqueId標誌。然後在排序完後或者列表對應的順序和uniqueId提交給後臺，我也不知道我說的你們能理解嗎，反正你們也可以打印出來看看。

效果