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)
      }
    }

 

 

 

 

 

 .