vue-实现单层拖拽排序功能

背景：产品要求实现一个拖拽排序的功能，以下记录实现过程。

效果：

 实现这个功能需要借助插件

1、安装插件

执行这个命令： npm install awe-dnd --save

 2、在main.js中配置

import VueDND from 'awe-dnd'; //引入

Vue.use(VueDND) //使用

3、在页面使用

list：数据源        item：当前循环值        group：唯一键 

4、事件

在js中可以写监听事件

created() {
    this.$dragging.$on('dragged',(value) => {
        console.log(value);
    })
},

 注：如需多层拖拽排序，可参考vue中使用vuedraggable实现嵌套多层拖拽排序功能_vuedraggable嵌套块拖拽_浩星的博客-CSDN博客