使用sortablejs 拖拽顺序不好使的问题

最近在使用sortablejs做拖拽改变顺序时发生不好使的问题，用的vxe-table的表格，拖动顺序时总是拖不过去。后来改成是行拖动，先记录下表格数据，然后在存储的数据上做增删操作，即把当前这个行数据先删除，然后再在拖动到的位置把它添加到表格上。

代码如下：

/**
 * 抽屉显示时执行
 */
settingQueryVisible(newVal, oldVal) {
  if (newVal) {
    this.settingQueryFlag = newVal
    //行拖拽
    this.rowDrop()
   }
}

// 必须在组件卸载时，把拖拽组件销毁
beforeDestroy() {
    this.$bus.$off('setAccItemConfirm')
    this.$bus.$off('setAccItemClear')
    if (this.sortable) {
      this.sortable.destroy()
    }
},
    
    
//方法
rowDrop() {
  let that = this
  this.$nextTick(() => {
    let xTable = that.$refs.vTable.$refs.xTable
    that.sortable = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
      handle: '.vxe-body--row',
      draggable: '.vxe-body--row',
      sort: true,
      onEnd: (event, target) => {
        let arr = xTable.getTableData().tableData   // 先保存表格数据
        const { newIndex, oldIndex } = event
        xTable.reloadData(xTable.getTableData().tableData)  //  重新load表格数据
        let currRow = arr.splice(oldIndex, 1)[0]   // 当前拖动的元素
        arr.splice(newIndex, 0, currRow)           //把当前拖动的元素添加到拖动到的位置 
        let checkedTableData = []        //记录方案上保存的哪些辅助核算项被勾选了，因为重新reload表格数据把之前勾选的数据给清除了，所以需要记录下之前哪些数据被勾选了，再次给它勾选上
        arr.forEach(item => {
          that.accItemTypeCheckList.forEach(it => {
            if (item.accItemCode === it.accItemCode) {
              checkedTableData.push(item)   
            }
          })
        })
        xTable.setCheckboxRow(checkedTableData, true)
        that.tableData = JSON.parse(JSON.stringify(arr))
      },
      onUpdate: event => {
        console.log('event: ', event)
      }
    })
  })
},