VUE实现拖拽功能(思路:后端返回数据的下标，拖拽后拿到两个值互换下标)

 1.安装插件

 npm i sortablejs --save

2.页面引入插件

import Sortable from 'sortablejs';

3.使用

<!-- table表格 -->
<div class="table draggable">
  <el-table ref="dragTable" :data="tableData" border style="width: 100%" tooltip-effect="dark" row-key="id"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <!-- <el-table-column prop="SerialNumber" label="序号">
    </el-table-column> -->
    <el-table-column prop="bankPositon" label="泊位" :show-overflow-tooltip="true">
    </el-table-column>
    <!-- <el-table-column prop="varietyName" label="货品" :show-overflow-tooltip="true">
    </el-table-column> -->
    <el-table-column prop="carNumber" label="车牌号码" :show-overflow-tooltip="true">
    </el-table-column>
    <el-table-column prop="address" label="状态" :show-overflow-tooltip="true">
      <template slot-scope="scope">
        <div style="display:flex" v-if="scope.row.status == '1'">
          等待装车
        </div>
        <div style="display:flex" v-if="scope.row.status != '1'">
          已装车
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="queueNo" label="排队号" :show-overflow-tooltip="true">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <div style="display:flex">
          <div class="imgbox"><img src="../../assets/img/tuo.png" alt=""></div>
          <el-button type="text" size="small" @click="handleClick(scope.row)">拖动排序</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</div>

<script>
  import Sortable from 'sortablejs';
  data() {
    return {
      //拖拽排序用到的数据
      sortable: null,
      oldList: [],
      newList: [],
      sort: [],
    }
  },
  //监听table表格的变化
  watch: {
    tableData() {
      this.oldList = this.tableData.map(v => v.id)
      this.newList = this.oldList.slice()
      this.$nextTick(() => {
        this.setSort()
      })
    }
  },
  methods:{
    //排序
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]// 获取 tbody 节点
      this.sortable = Sortable.create(el, {// 初始化顺便设置配置
        ghostClass: 'sortable-ghost', // 停靠位置样式（要拖动的元素的样式，给拖动的元素添加类名，自己再css中设置样式）
        setData: function (dataTransfer, dragEl) { // 避免 Firefox 的bug
          dataTransfer.setData('Text', dragEl.textContent)
        },
        // 拖动结束的回调
        onEnd: evt => {
           //可打印查看回调console.log(evt)
          var oldList = this.tableData[evt.oldIndex];// oldIndex旧的排序
          var newList = this.tableData[evt.newIndex];// newIndex新的排序
          // 需要传递的参数
          this.sort.push({
            id: oldList.id,
            sortNo: newList.sortNo
          }, {
            id: newList.id,
            sortNo: oldList.sortNo
          })
          //拿到两个元素后提交到后端，重新请求数据
          _axios.put(`kd/queueInfo/editSort`, { queueInfo: this.sort }).then(res => {
            if (res.data.code == 200) {
              this.sort = []
              this.tableData = []
              this.requestData()//重新请求数据
            }
          })
        }
      })
    },
  }
</script>