vue实现拖拽排序功能

前言：

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

效果图：

实行步骤：

步骤一：安装插件

 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:你唯一的键，注意一个里面只有一个}

              

                

                  
{
    {item.name}}
                  
{
    {item.score}}分
                
                

                    
                    |
                    
                
              
            

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

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

  },