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

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

vue 里使用示例： https://sortablejs.github.io/Vue.Draggable/#/simple  (示例右角按钮 可跳转到相关源码)

源git:             https://github.com/SortableJS/Sortable

基于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">
   <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"
handle=".handle"
:group="{ name: 'people'}"
@change="datadragEnd"
>
        <transition-group>
            <div v-for="element in myArray" :key="element.id">
                {{element.name}}
            </div>
        </transition-group>
</draggable>

methods: {
      datadragEnd (evt) {
        console.log('拖动前的索引 :' + evt.oldIndex)
        console.log('拖动后的索引 :' + evt.newIndex)
      }
    }

 

 

 

 

 

 .