vue draggable实现拖拽效果

首先安装： npm i vuedraggable -s

然后引入相对应的组件 import Draggable from 'vuedraggable';

在components里面进行注册

    
      
{{item.title}}
    

css: 使用的是scss

.dragArr {
    width: 400px;
    margin: 0 auto;

    .drag {
      border: 1px solid #f2f2f2;
      width: 300px;
      margin: 10px auto;
      height: 60px;
      line-height: 60px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .check {
      background-color: greenyellow;
    }
  }

点击事件： 

check(index: number) {
    this.checkindex = index;
  }

数据格式： 

dragArr: [{
        title: '第一个'
      },
      {
        title: '第二个'
      },
      {
        title: '第三个'
      },
      {
        title: '第四个'
      },
      {
        title: '第五个'
      },
    ]

效果图：