原生 table表头跟着内容拖动

<table cellspacing="0" border-collapse="collapse" style="border: #b8ab9a 1px solid;width: calc(100% - 30px);">
    <thead style="background-color: #b8ab9a;position: sticky;top: 0;width: 100%;">
      <tr style="cursor: pointer !important;">
        <th @dragstart="dragstart($event,index)" @dragend="dragend" draggable="true"
          v-for="(item,index) in titleList" :key="item.title" class="thTitle">
          <span class="thTitleContent"><img src="@/assets/icons/move.png" style="width: 10px;height: 14px;" alt="">{{item.content}}</span>
        </th>
      </tr>
    </thead>
    <tbody id="t-body">
      <tr v-for="(item,index) in dataList" :key="index">
        <td v-for="(value,key) in item" :key="key">
          {{value}}
        </td>
      </tr>
    </tbody>
</table>

data() {
      return {
        titleList: [
          {
            content:this.$t('lang.partsList.model'),
            title:'model'
          },{
            content:this.$t('lang.partsList.section'),
            title:'section'
          },{
            content:this.$t('lang.partsList.des'),
            title:'des'
          },{
            content:this.$t('lang.partsList.secNum'),
            title:'secNum'
          },{
            content:this.$t('lang.partsList.callout'),
            title:'callout'
          },{
            content:this.$t('lang.partsList.action'),
            title:'action'
          }
        ],
        dataList:[],
        start: null,
        end: null,
        searchText:''
      }

methods: {
      getDataList(){
        let obj = {
          model:'1',
          section:'2',
          des:'3',
          secNum:'4',
          callout:'5',
          action:'6'
        }
        let list = [];
        this.titleList.forEach(item=>{
          Object.keys(obj).forEach(key=>{

            if(item.title == key){
             list.push(obj[key])

            }
          })
        })
        this.dataList = [list]
        console.log(this.dataList)
      },
    dragstart(e, index) {
        console.log(index, e)
        this.start = index;
      },
      dragend(e) {
        const th = document.getElementsByTagName('th');
        let stat = 30;
        let id = null;
        for (let i = 0; i < th.length; i++) {
          if (stat < e.clientX && e.clientX < stat + th[i].clientWidth) {
            id = i
          }
          stat += th[i].clientWidth
        }
        let string = this.titleList[this.start];
        this.titleList.splice(this.start, 1);
        this.titleList.splice(id, 0, string);
        this.getDataList();
        console.log(this.titleList)
        console.log(id)
        console.log(e.clientX)
      }
}