實現(xiàn)拖拽效果（vue.draggable）

目的：排序

++來源++

1. 下載npm包

npm install vuedraggable sortable --save 

2.在 .vue 文件中

用draggable包裹被拖拽的元素,options是拖拽效果行為的相關配置，和sortable的配置基本完全一樣，start end move是相關事件。

<template>

<draggable v-model="myArray" :options="{group:'people'}" @start="drag" @end="drop" :move="checkMove">
   <div v-for="res in myArray">{{res.name}}</div>
</draggable>

</template>

<script>
import draggable from 'vuedraggable'
...
export default {
    components: {draggable,},
    data(){
        return{
            myArray:[
                {
                    name:'div1'
                },
                {
                    name:'div2'
                },
            ],
        }
    },
    method:{
          drag(){ // 拖動時候觸發(fā)的函數(shù)
           
         },
          drop(e){  // 拖動結束的時候觸發(fā)
            // 我個人用來取出移動后的下標，通過下標去做對數(shù)組重新排序
             console.log(e.newIndex)  // 拖拽后存放的下標
          }
    }       
}
</script>
  ...

思路：

拖動的時候可以復制出一個dom對象來實現(xiàn)拖動（復制一個出來拖比較方便），當釋放鼠標的時候把左側數(shù)組里的數(shù)據(jù)移動到右側數(shù)據(jù)集，再把復制的dom移除即可；

工具：

拖拽的方法可以用jquery.ui的，也可以用https://www.npmjs.com/package/draggable這個簡單的拖拽類；當然也可以自己寫一個