三中方案，推荐使用第三种（element组件）

一、sortablejs 排序

npm install sortablejs --save

官网参考

http://www.sortablejs.com/index.html
http://sortablejs.github.io/Sortable/

1.1、导入项目

  import Sortable from 'sortablejs';

或者直接下载源码导入

  // import Sortable from '@/plugins/Sortable.js';

    var that = this;
        setTimeout(function () {
          var el = document.getElementById('sub_items');
          this.sortable = Sortable.create(el,{onEnd: function (evt) {
              let itemEl = evt.item;
              let oldIndex = evt.oldIndex;
              let newIndex = evt.newIndex;
              let temp = that.subData[oldIndex];
              if( oldIndex < newIndex ){
                for(var i = oldIndex ; i < newIndex ; i++){
                  that.subData[i] = that.subData[i+1];
                }
              }else if( oldIndex > newIndex ){
                for(var i = oldIndex ; i > newIndex ; i--){
                  that.subData[i] = that.subData[i-1];
                }
              }
              that.subData[newIndex] = temp;
            },
          });
        },500)

1.2效果

   <el-dialog :title="title" :visible.sync="showSort" width="40%" append-to-body  @close="updateIndex">
            <div class="tableOverF">
                <div class="table-head table-croll">
                    <ul class="croll" style="cursor:Default">
                        <li>终端名称</li>
                        <li>终端号码</li>
                        <li>分机号码</li>
                        <li>创建时间</li>
                        <li>所属集团</li>
                        <li>操作</li>
                    </ul>
                </div>
                <div id="sub_items" class="table-croll">
                    <ul  v-for="(item,index) in subData" class="croll" :key="index">
                        <li>
                            {{item.NAME}}
                        </li>
                        <li>
                            {{item.NUMBER}}
                        </li>
                        <li>
                            {{item.EXTNUMBER}}
                        </li>
                        <li>
                            {{item.CREATEDATETIME}}
                        </li>
                        <li>
                            {{item.fleetName}}
                        </li>
                        <li>
                            <span><img src="@/assets/images/mapicon/sortOperate.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle"></span>
                            <span><img src="@/assets/images/mapicon/sortUp.png" style="height: 25px;width: 25px;margin-right: 10px;vertical-align: middle;cursor: pointer" @click="sortUp(index)"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </el-dialog>
       

 import Sortable from 'sortablejs';
       

    /deep/ .el-checkbox__input > .el-checkbox__inner {
        display: none;
    }

    /deep/ .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
    }

    #subscriberManage.el-checkbox__input > .el-checkbox__inner {
        display: none;
    }

    #subscriberManage.is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
    }
    .table-head{
        background-color: #EEF4FF;
        color: #333333;
        font-weight: normal;
        font-size: 14px;
        font-family: '微软雅黑';
        border: none;
        padding: 12px 15px;
        text-align:left !important;
    }
    .table-croll{
        display:table;
        padding:0px;
        width:100%;
    }
    .croll {
        display:table-row;
        list-style: none;
        height: 30px;
        width:100%;
        border-top: 0px;
        font-size: 13px;
        color: #333333;
        cursor:move;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
        line-height:25px;
        text-align:left ! important;
    }
    .croll li {
        display:table-cell ;
        float: left;
        width:15%;
        text-indent: 2em;
        list-style-type:none;
        height:25px;
        padding-left:5px;
        overflow:hidden;
        white-space:nowrap;
        vertical-align: middle;
        text-overflow:ellipsis
    }
    .croll:nth-of-type(even){ background:#f0f3f6;}
    #subscriberManage .table-wrap {
        height: 500px !important;;
        overflow: auto;
    }
    .tree_class{
        height: 6860px;
        /*border-right: 1px solid #57a3f3;*/
    }
    .tableOverF{
        height: 300px;
        overflow: auto;
    }
    .searchForm{
        margin: 1% 0% 0 20%;
    }
    .searchFormBtn{
        margin-left: 5px;
        display: inline-block;
    }

二、使用vuedraggable

-安装 npm i -S vuedraggable

vuedraggable依赖 Sortable.js，所以下载了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。

vuedraggable是Sortable一种加强，实现组件化的思想，可以结合Vue，使用起来更方便

1.1引入

  import draggable from "@/vuedraggable";
   import draggable from "@/vuedraggable";
  export default {
    name: "table-example",
    display: "Table",
    order: 8,
    components: {
      draggable
    },

1.2使用

  <table class="table table-striped">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Sport</th>
                </tr>
                </thead>
                <draggable v-model="list" tag="tbody">
                    <tr v-for="item in list" :key="item.name">
                        <td scope="row">{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.sport }}</td>
                    </tr>
                </draggable>
            </table>

效果

<template>
    <div class="row">
        <div class="col-8">
            <h3>Draggable table</h3>

            <table class="table table-striped">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Sport</th>
                </tr>
                </thead>
                <draggable v-model="list" tag="tbody">
                    <tr v-for="item in list" :key="item.name">
                        <td scope="row">{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.sport }}</td>
                    </tr>
                </draggable>
            </table>
        </div>

        <rawDisplayer class="col-3" :value="list" title="List" />
    </div>
</template>

<script>
  import draggable from "@/vuedraggable";
  export default {
    name: "table-example",
    display: "Table",
    order: 8,
    components: {
      draggable
    },
    data() {
      return {
        list: [
          { id: 1, name: "Abby", sport: "basket" },
          { id: 2, name: "Brooke", sport: "foot" },
          { id: 3, name: "Courtenay", sport: "volley" },
          { id: 4, name: "David", sport: "rugby" }
        ],
        dragging: false
      };
    }
  };
</script>
<style scoped>
    .buttons {
        margin-top: 35px;
    }
.table{
    width: 100% !important;
    margin-bottom: 1rem;
    color: #212529;
}
.thead-dark{
    width: 100%;
    height: 100px;
}
    .table-sm td, .table-sm th {
        padding: .3rem
    }

    .table-bordered {
        border: 1px solid #dee2e6
    }

    .table-bordered td, .table-bordered th {
        border: 1px solid #dee2e6
    }

    .table-bordered thead td, .table-bordered thead th {
        border-bottom-width: 2px
    }

    .table-borderless tbody + tbody, .table-borderless td, .table-borderless th, .table-borderless thead th {
        border: 0
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, .05)
    }

    .table-hover tbody tr:hover {
        color: #212529;
        background-color: rgba(0, 0, 0, .075)
    }

    .table-primary, .table-primary > td, .table-primary > th {
        background-color: #b8daff
    }

    .table-primary tbody + tbody, .table-primary td, .table-primary th, .table-primary thead th {
        border-color: #7abaff
    }

    .table-hover .table-primary:hover {
        background-color: #9fcdff
    }

    .table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th {
        background-color: #9fcdff
    }

    .table-secondary, .table-secondary > td, .table-secondary > th {
        background-color: #d6d8db
    }

    .table-secondary tbody + tbody, .table-secondary td, .table-secondary th, .table-secondary thead th {
        border-color: #b3b7bb
    }

    .table-hover .table-secondary:hover {
        background-color: #c8cbcf
    }

    .table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th {
        background-color: #c8cbcf
    }

    .table-success, .table-success > td, .table-success > th {
        background-color: #c3e6cb
    }

    .table-success tbody + tbody, .table-success td, .table-success th, .table-success thead th {
        border-color: #8fd19e
    }

    .table-hover .table-success:hover {
        background-color: #b1dfbb
    }

    .table-hover .table-success:hover > td, .table-hover .table-success:hover > th {
        background-color: #b1dfbb
    }

    .table-info, .table-info > td, .table-info > th {
        background-color: #bee5eb
    }

    .table-info tbody + tbody, .table-info td, .table-info th, .table-info thead th {
        border-color: #86cfda
    }

    .table-hover .table-info:hover {
        background-color: #abdde5
    }

    .table-hover .table-info:hover > td, .table-hover .table-info:hover > th {
        background-color: #abdde5
    }

    .table-warning, .table-warning > td, .table-warning > th {
        background-color: #ffeeba
    }

    .table-warning tbody + tbody, .table-warning td, .table-warning th, .table-warning thead th {
        border-color: #ffdf7e
    }

    .table-hover .table-warning:hover {
        background-color: #ffe8a1
    }

    .table-hover .table-warning:hover > td, .table-hover .table-warning:hover > th {
        background-color: #ffe8a1
    }

    .table-danger, .table-danger > td, .table-danger > th {
        background-color: #f5c6cb
    }

    .table-danger tbody + tbody, .table-danger td, .table-danger th, .table-danger thead th {
        border-color: #ed969e
    }

    .table-hover .table-danger:hover {
        background-color: #f1b0b7
    }

    .table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th {
        background-color: #f1b0b7
    }

    .table-light, .table-light > td, .table-light > th {
        background-color: #fdfdfe
    }

    .table-light tbody + tbody, .table-light td, .table-light th, .table-light thead th {
        border-color: #fbfcfc
    }

    .table-hover .table-light:hover {
        background-color: #ececf6
    }

    .table-hover .table-light:hover > td, .table-hover .table-light:hover > th {
        background-color: #ececf6
    }

    .table-dark, .table-dark > td, .table-dark > th {
        background-color: #c6c8ca
    }

    .table-dark tbody + tbody, .table-dark td, .table-dark th, .table-dark thead th {
        border-color: #95999c
    }

    .table-hover .table-dark:hover {
        background-color: #b9bbbe
    }

    .table-hover .table-dark:hover > td, .table-hover .table-dark:hover > th {
        background-color: #b9bbbe
    }

    .table-active, .table-active > td, .table-active > th {
        background-color: rgba(0, 0, 0, .075)
    }

    .table-hover .table-active:hover {
        background-color: rgba(0, 0, 0, .075)
    }

    .table-hover .table-active:hover > td, .table-hover .table-active:hover > th {
        background-color: rgba(0, 0, 0, .075)
    }

    .table .thead-dark th {
        color: #fff;
        background-color: #343a40;
        border-color: #454d55
    }

    .table .thead-light th {
        color: #495057;
        background-color: #e9ecef;
        border-color: #dee2e6
    }

    .table-dark {
        color: #fff;
        background-color: #343a40
    }

    .table-dark td, .table-dark th, .table-dark thead th {
        border-color: #454d55
    }

    .table-dark.table-bordered {
        border: 0
    }

    .table-dark.table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, .05)
    }

    .table-dark.table-hover tbody tr:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, .075)
    }

    @media (max-width: 575.98px) {
        .table-responsive-sm {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch
        }

        .table-responsive-sm > .table-bordered {
            border: 0
        }
    }

    @media (max-width: 767.98px) {
        .table-responsive-md {
            display: block;
            width: 100%;
            overflow-x: auto;
        }
    }

</style>

使用element弹框拖拽排序

这个比较简单，需要注意的是，如果在弹框使用时，需要先获取到元素，因为Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

直接上代码

<template>
    <div>
        <el-button type="primary" @click="Open">打卡弹框</el-button>
        <div style="width:800px" >
            <el-dialog title="管理" :visible.sync="seen" append-to-body >
                <div ref="myChat"></div>
                <div id="textw">
                    <el-table :data="tableData"
                              border
                              row-key="id"
                              align="left"
                    >
                        <el-table-column ref="tableColumn" v-for="(item, index) in col"
                                         :key="`col_${index}`"
                                         :prop="dropCol[index].prop"
                                         :label="item.label">
                        </el-table-column>
                    </el-table>
                </div>
            </el-dialog>
            <pre style="text-align: left">
      {{dropCol}}
    </pre>
            <pre style="text-align: left">
      {{tableData}}
    </pre>

        </div>
    </div>
</template>
<script>
  // import Sortable from 'sortablejs'
  import Sortable from '@/plugins/Sortable.js';
  export default {
    data() {
      return {
        seen:false,
        drawBodyWrapper:'',
        drawheaderWrapper:'',
        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 弄'
          }
        ]
      }
    },
    methods: {
      Open(){
        this.seen =true;
        this.$nextTick(()=>{
          let id = this.$refs.myChat;
          let tableColumn = this.$refs.tableColumn;
          const drawBodyWrapper = document.querySelector('.el-dialog__body tbody')
          const drawheaderWrapper = document.querySelector('.el-table__header-wrapper tr')
          this.drawBodyWrapper = drawBodyWrapper;
          this.drawheaderWrapper = drawheaderWrapper;
          console.log(this.drawBodyWrapper);
          console.log(this.drawheaderWrapper);
          this.rowDrop()
          this.columnDrop()
        })
      },
      //行拖拽
      rowDrop() {
       /* const id = document.querySelector('.el-dialog__body #textw')
        console.log(id);*/
        const tbody =   this.drawBodyWrapper
        const _this = this
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0]
            _this.tableData.splice(newIndex, 0, currRow)
          }
        })
      },
      //列拖拽
      columnDrop() {
        const wrapperTr =  this.drawheaderWrapper;
        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>

效果，支持拖拽排序