vue draggable实现拖拽效果

首先安装： npm i vuedraggable -s

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

在components里面进行注册

<!-- group: 如果又相同的组， 则可以互相进行拖拽， tag： 渲染后的标签形式， animation： 过渡动画 -->
    <draggable class="dragArr" :dragArr="dragArr" group="homeDrag" tag="div" animation="100">
      <div
        v-for="(item, index) in dragArr"
        :key="item.title"
        class="drag"
        :class="{check: index === checkindex}"
        @mousedown="check(index)"
        @mouseup="check(index)"
      >{{item.title}}</div>
    </draggable>

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: '第五个'
      },
    ]

效果图：