vue实现拖拽排序功能，单层嵌套，多层嵌套

前言：

        因为项目需要需要弄一个拖拽排序的效果，在这里使用的是vue的 awe-dnd 实现的效果

官网入口：https://github.com/hilongjw/vue-dragging

单层嵌套：

效果图：

实行步骤：

步骤一：安装插件

 cnpm install awe-dnd --save 或者 npm install awe-dnd --save

步骤二：在main.js中配置

//引入拖拽排序插件
import VueDND from 'awe-dnd'

Vue.use(VueDND)

步骤三：在页面上使用

在你的li里面加上这句话：

v-dragging="{ list: knowGroup, item: item, group: 'knowTab' }"

解释：

{ list:你列表的数据,     item: 是当前循环值 , group:你唯一的键，注意一个里面只有一个}

<ul class="tab_list">
              <li :class="{'active':nav_active == index}"
                  v-for="(item,index) in knowGroup"
                  :key="index"
                  @click="changeArticleType(item,index)"
                  v-dragging="{ list: knowGroup, item: item, group: 'knowTab' }">
                <div class="tab_list_left">
                  <p>{{item.name}}</p>
                  <p>{{item.score}}分</p>
                </div>
                <div class="tab_list_right">
                    <a-icon type="edit" style="color:#0B99AD;" @click="operateFun('editPersonGroup', item)" />
                    <span>|</span>
                    <a-icon type="delete" style="color:#0B99AD;" @click="operateFun('delPersonGroup', item)" />
                </div>
              </li>
            </ul>

js中写上他的监听事件，在console.log里面或者用debugger可以看到他的value值

mounted() {
    this.$dragging.$on('dragged', (value) => {
      //因为我这在排序的时候不需要做处理，所以空着就行
      debugger
    })

  },

多层嵌套：（推荐其他多层嵌套链接：https://blog.csdn.net/qq_41619796/article/details/116027212）

效果图：（1，点击第一层的，第一天，第二天，第三天可以换大的顺序，再第二层里面拖拽他本天的内容，是可以的，比如第一天内的数据可以拖拽换顺序）

实行步骤：

步骤一：安装插件

 cnpm install awe-dnd --save 或者 npm install awe-dnd --save

步骤二：在main.js中配置

//引入拖拽排序插件
import VueDND from 'awe-dnd'

Vue.use(VueDND)

步骤三：在页面上使用，源码

<template>
  <ul class="person-list">
    <li
      style="background: #9ee39a;margin-bottom:10px;border:1px solid red;"
      v-for="(item,index) in person"
      :key="'oneItem'+index"
      v-dragging="{ item: item, list: person, group: 'personInfo' }"
    >
      {{ item.name }}
      <ul>
        <li
          v-for="(twoItem,i) in item.children"
          :key="'twoItem'+i"
          v-dragging="{ item: twoItem, list: item.children, group: item.name }">
          {{ twoItem.name }}
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      person: [
        {
          name: '第一天',
          children: [
            {
              name: '1---111'
            },
            {
              name: '1---222'
            }
          ]
        }, {
          name: '第二天',
          children: [
            {
              name: '2---111'
            },
            {
              name: '2---222'
            }
          ]
        }, {
          name: '第三天',
          children: [
            {
              name: '3---111'
            },
            {
              name: '3---222'
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.$dragging.$on('dragged', (res) => {
      // ...
    })
    this.$dragging.$on('dragend', () => {
      // ...
    })
  }
}
</script>
<style lang="scss" scoped>
  .person-list{
    margin-top:200px;
    width:500px;
    height:500px;
  }
</style>

其他功能待研究

更多功能入口：http://www.360doc.com/content/20/1230/08/29701314_954313386.shtml