Vue.Draggable/SortableJS 的排序功能，在VUE中的使用

此插件git: https://github.com/SortableJS/Vue.Draggable

基于Sortable.js http://www.cnblogs.com/xiangsj/p/6628003.html

使用方法：

一. 下载包：cnpm install vuedraggable -S   (后加-S 保存配置到package.json)

二. 使用：

引入依赖，注册组件

import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...

html:

<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

data:

data () {
return {
　　　　//测试用
myArray: [{
id:"1",
name:"aaaaaaaaaaaaa",
},{
id:"2",
name:"bbbbbbbbbbbbb",
},{
id:"3",
name:"ccccccccccccccc",
}]
}
},

如上图，拖拽排序实现了，

三. 拓展使用：

分组排序和部分手势:options="{group:'group01'}"，拖拽中，拖拽结束，及进行排序后的存储（按索引）...

<draggable v-model="myArray" :options="{group:'group01', handle:'.handle'}" :move="getdata" @update="datadragEnd">
        <transition-group>
            <div v-for="element in myArray" :key="element.id">
                {{element.name}}

</div>
        </transition-group>

</draggable>

methods: {
getdata (evt) {
console.log(evt.draggedContext.element.id)
},
datadragEnd (evt) {
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.tags)
}
}

 .