可拖拽排序的列表

依赖装一下；

npm install awe-dnd --save

引用用一下；

main.js

// ......
import VueDND from 'awe-dnd'
Vue.use(VueDND)
// ......

一、单一列表项的拖拽排序

<template>
  <ul class="person-list">
      <li v-for="item in person" v-dragging="{ item: item, list: person, group: 'personInfo' }"
          :key="item.name"
      >{{item.name}}
      </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      person: [
        {
          name: "Jack"
        }, {
          name: "Rose"
        }, {
          name: "John"
        }
      ]
    }
  },
  mounted () {
    this.$dragging.$on('dragged', (res) => { // 拖拽时触发，回调里面有一个参数
      // ...
    })
    this.$dragging.$on('dragend', () => { // 停止拖拽后触发，回调无参数
      // ...
    })
  }
}
</script>

都是顾名思义的代码，不做解释；来看个高级点的

二、复合列表项的拖拽排序

直接拿走先

<template>
  <ul class="person-list">
      <li v-for="item in person" v-dragging="{ item: item, list: person, group: 'personInfo' }"
          :key="item.name"
      >{{color.text}}
        <ul>
          <li v-for='(member,index) in item.children' v-dragging="{ item: member, list: item.children, group: item.name }"
          :key="index">{{member.name}}</li>
        </ul>
      </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      person: [
        {
          name: "Jack",
          children: [
            {
              sex: 'boy',
              name: 'Mike1'
            },
            {
              sex: 'girl',
              name: 'Robin1'
            }
          ]
        }, {
          name: "Rose",
          children: [
            {
              sex: 'boy',
              name: 'Mike2'
            },
            {
              sex: 'girl',
              name: 'Robin2'
            }
          ]
        }, {
          name: "John",
          children: [
            {
              sex: 'boy',
              name: 'Mike3'
            },
            {
              sex: 'girl',
              name: 'Robin3'
            }
          ]
        }
      ]
    }
  },
  mounted () {
    this.$dragging.$on('dragged', (res) => {
      // ...
    })
    this.$dragging.$on('dragend', () => {
      // ...
    })
  }
}
</script>

自定义指令v-dragging中的参数，对号入座即可；但是最重要的参数，就是group了。它用于区分需要排序的对象组；由于最外面的一层都是personInfo，所以最外层的list之间可以拖拽排序；而里面，分别是三个列表项的子列表；这时就需要去区分它们之间的组名，也就是group；这个属性只做区分用，没实际用途；所以，可以直接利用最外层的列表项属性，去区分；从而实现复合列表的排序；需要额外注意的是：这些组名，无论谁嵌套谁，都不能有重名；否则拖拽效果异常