使用vuedraggable拖拽排序

,参考文档：vuedraggable, Vue.Draggable学习总结

使用插件 vuedraggable

###一级排序

1. 使用npm 安装插件vuedraggable

npm i -S vuedraggable

2. srcipt中导入vuedraggable,且声明组件

导入 import draggable from 'vuedraggable'

声明 components: { draggable },

3. 定义list，list内对象结构可随意定制

list: [{name: 11111111111111111111}, {name: 22222222222222222}, {name: 333333333333333333333}, {name: 4444444444444444444}, {name: 55555555555555555555555}, {name: 6666666666666666}]

4. 在temlate输出

          {{vo.name}}

5. 添加个button，获取list的值

        确定

      

 sure () {

     console.log(this.list)

}

### 多级排序

vuedraggable 可以多级镶嵌的来达到多级拖拽排序的目的

1. 把list的结构改一下

list: [

        {

          name: '1.一级菜单',

          children: [

            {

              name: '二级菜单',

              children: [

                {

                  name: '三级菜单'

                },

                {

                  name: '',

                  emptyHolder: true

                }

              ]

            },

            {

              name: '',

              emptyHolder: true

            }

          ],

        },

        {

          name: '2.一级菜单',

          children: [

            {

              name: '二级菜单',

              children: [

                {

                  name: '三级菜单'

                },

                {

                  name: '',

                  emptyHolder: true

                }

              ]

            },

            {

              name: '',

              emptyHolder: true

            }

          ],

        }

      ]

2. 用vuedraggable ，写一个组件，方便循环嵌套