vue中實現拖拽調整順序功能

使用  vuedraggable 組件 或 vue-dragging 指令方式 實現 拖拽調整順序功能。

使用組件： vuedraggable

vuedraggable + transition-group ,組合使用效果更奈斯哦
使用方式：
   1、先安裝  npm install vuedraggable
   2、使用全局注冊 或者 哪個頁面使用就引入哪個頁面也可。 
      import vuedraggable from 'vuedraggable'
      注意一點：在使用的時候，可以通過v-model來雙向綁定本地data，如果需要更新或者是觸發父組件監聽的事件，可以在
      updated() 中去 emit 。

index.vue 頁面：
<template>
  <div class="app-container">
     <vuedraggable class="wrapper" v-model="list">
        <transition-group>
           <div class="detail" v-for="item in list" :key="item">{{item}}</div>
        </transition-group>
     </vuedraggable>
  </div>
</template>

<script>
  import vuedraggable from 'vuedraggable'
  export default{
    name:'index',
    data(){
      return{
        list:[1,2,3,4,5,6,7,8,9,10],
      }
    },
    components:{
      vuedraggable
    },
    updated(){
      console.log(this.list)
    }
  }
</script>
<style lang="scss">
  .app-container{
    width:400px;
    .wrapper{
       display:flex;
       justify-content:center;
       align-items:center;
       width:100%;
       .detial{
         width:100%;
         height:50px;
         line-height:50px;
         background-color:#42b983;
         margin-bottmo:20px;
       }
    }
  }
</style>
效果圖展示：

使用 awe-dnd 方式：

vue-dragging 的 npm 包的名字是 awe-dnd,這個庫主要是封裝了 v-dragging 全局指令，然后通過全局指令
去數據綁定等。
與 vuedraggable相比，awe-dnd 是沒有雙向綁定的，因此提供了事件，在拖拽結束的時候用來跟新列表或者是去觸發父組件
監聽的事件。

安裝依賴： 
   npm install awe-dnd --save

main.js 文件：
   import VueDND from 'awe-dnd'
   Vue.use(VueDND);

index.vue 界面：
   <template>
      <div class="app-container">
         <div class="color-content">
           <div class="color-detail" v-for="color in colors" :key="color.id"
           v-dragging="{item:color,list:colors,group:'color'}" 
           :style="{'background-color':color.bgColor}">{{color.text}}</div>
         </div>
      </div>
   </tempalte>
   <script>
      export default{
         name:'index',
         data(){
           return{
              colors:[{text:'111',id:1,color:'#00af66'},...]
           }
         },
         mounted(){
           this.$dragging.$on('dragged',({value})=>{
              console.log(value.item,value.list,value.otherData)
              //value.item  => {color:'#4EFEB3',id:5,text:'555'}
              //value.list  => 打印出 colors 數組
              //value.otherData => undefined
           })
           this.$dragging.$on('dragend',(res)=>{
              console.log(res);// {group:'color'}
           })
         }
      }
   </script>
   <style lang="scss">
      .app-container{
         width:400px;
         .color-detail{
            width:400px;
            height:50px;
            line-height:50px;
            color:#fff;
            margin-bottom:20px;
         }
      }
   </style>
效果展示圖：

官網地址：https://david-desmaisons.github.io/draggable-example/

參考鏈接：http://www.ptbird.cn/vue-draggable-dragging.html