draggable实现拖拽

1.安装插件

yarn add vuedraggable

npm i -s vuedraggable

2. 使用插件

import Draggable from 'vuedraggable'

注册

 components: {  Draggable  },

 <draggable 
  animation="1000"  // 拖动时的过渡效果
  handle=".drag-btn" // 指定可拖动元素的样式名称
  chosenClass="chosen"  // 属性设置选中元素的样式
  forceFallback="true" 
  ghost-class="ghost" // 目标位置占位符的样式及需要停靠位置的样式
  @sort="handleSortChange"> // 重要的是这个方法

    <tableBody // 这个是另一个封装的插件
      v-for="(columnData, indexData) in list"
      :key="indexData"
      :item="columnData"
     ></tableBody>

  </draggable>

sort方法

 handleSortChange(val){
      const targetRow = this.list.splice(val.oldIndex, 1)[0] // 获取第一条数据
      this.list.splice(val.newIndex, 0, targetRow)
      // 将数组进行深拷贝，置空后重新赋值给数组
      let newArr = this.list.splice(0)
      this.list = [] // 置空
      this.$nextTick(() => {
        this.list = newArr
        this.$set(this,'list',newArr)
      })
    },