vue+element-ui实现表格列表拖拽

一、安装sortablejs 依赖

npm install sortablejs --save

二、vue页面代码

<template>
  <div >
    <el-table :data="tableData" row-key="id">
      <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import Sortable from 'sortablejs';
  export default {
    data () {
      return {
        col:[
          {label: '日期',  prop: 'date' },
          { label: '姓名',  prop: 'name' },
          {label: '地址', prop: 'address'},
        ],
        dropCol:[
          {label: '日期',  prop: 'date' },
          {label: '姓名', prop: 'name' },
          {label: '地址', prop: 'address'},
        ],
        tableData: [
          {
            id: '1',
            date: '2016-05-02',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 100 弄'
          },
          {
            id: '2',
            date: '2016-05-04',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 200 弄'
          },
          {
            id: '3',
            date: '2016-05-01',
            name: '王小虎3',
            address: '上海市普陀区金沙江路 300 弄'
          },
          {
            id: '4',
            date: '2016-05-03',
            name: '王小虎4',
            address: '上海市普陀区金沙江路 400 弄'
          }
        ]
      };
    },
    mounted () {
      this.rowDrop();
      this.columnDrop();
    },
    methods: {
      // 行拖拽
      rowDrop () {
        // 此时找到的元素是要拖拽元素的父容器
        const tbody = document.querySelector('.el-table__body-wrapper tbody');
        const _this = this;
        Sortable.create(tbody, {
          //  指定父元素下可被拖拽的子元素
          draggable: ".el-table__row",
          onEnd ({ newIndex, oldIndex }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0];
            _this.tableData.splice(newIndex, 0, currRow);
          }
        });
      },
      // 列拖拽
      columnDrop () {
        const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
        this.sortable = Sortable.create(wrapperTr, {
          animation: 180,
          delay: 0,
          onEnd: evt => {
            const oldItem = this.dropCol[evt.oldIndex];
            this.dropCol.splice(evt.oldIndex, 1);
            this.dropCol.splice(evt.newIndex, 0, oldItem);
          }
        });
      }
    }
  };
</script>

三、另一种方法

<template>
  <div >
    <li class="li_row" v-for="(item,index) in linkData " :key=index draggable="true" @dragstart="drag($event,index)" @drop="drop($event,index)" @dragover='allowDrop($event)'>
      <div class="li_item order">{{index+1}}</div>
      <div class="li_item title">
        <input v-model.trim="item.name" type="text" placeholder="请输入站点名称" disabled>
      </div>
      <div class="li_item url">
        <input v-model.trim="item.url" type="text" placeholder="链接需加上 http:// 或 https://" disabled>
      </div>
      <div class="li_item description">
        <input v-model.trim="item.description" type="text" placeholder="请输入描述" disabled>
      </div>
      <div class="li_item option">
        <el-button type="text" @click="deleteLink(index)">删除</el-button>
      </div>
    </li>
  </div>
</template>
<script>
  import Sortable from 'sortablejs';
  export default {
    data () {
      return {
        linkData: [
          {name:'百度',url:'wwww.baidu.com',description:'baidu'},
          {name:'腾讯网',url:'wwww.qq.com',description:'tencent'},
          {name:'新浪微博',url:'https://www.weibo.com/',description:'weibo'},
          {name:'今日头条',url:'https://www.toutiao.com/',description:'bytedance'},
          {name:'哔哩哔哩',url:'https://www.bilibili.com/',description:'bilibili'}
        ]
      };
    },
    methods: {
      drag(event, index) {
        event.dataTransfer.setData('index', index);
      },
      drop(event, index) {
        event.preventDefault();
        let startIndex = parseInt(event.dataTransfer.getData('index'));
        let currentIndex = parseInt(index);

        if (startIndex - currentIndex > 0) {
          this.linkData.splice(currentIndex, 0, this.linkData[startIndex]);
          this.linkData.splice(startIndex + 1, 1)
        } else if (startIndex - currentIndex < 0) {
          this.linkData.splice(currentIndex + 1, 0, this.linkData[startIndex]);
          this.linkData.splice(startIndex, 1)
        } else {
          console.log("什么也不用做");
        }
      },
      allowDrop(event) {
        event.preventDefault();
      }
    }
  };
</script>
<style>
  .li_row{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
  }
  .li_item > input {
    border: none;
  }
</style>