sortable.js 页面排序混乱问题解决

sortable.js编写一个可拖拽组件 

 最近用sortable.js写了一个多选、重复选、可拖拽的下拉框，但onend回调里将数据改变之后，页面会根据最新的数据重新进行渲染，就会出现拖拽之后页面不改变或者排序混乱，解决办法如下

附代码

<div class="titInputDiv">
                <div :class="callError?'titInput callError':'titInput'" @click.stop="titInputX()">
                  <div class="titInputTabId" style="display:flex;flex-wrap: wrap;" id="selectTit">
                  <div class="titInputTab" v-for="(item,index5) in model.titleComponents" :key="index5" @click="delTitName(index5)"><div>{{item}}</div><a-icon type="close" /></div>
                  </div>
                </div>
                <div class="selectTitInputTab" v-if="titInput">
                    <div class="selectCon1" style="padding-left:6px">固定词组</div>
                    <div v-for="(item,index) in guding" :key="index" class="selectCon" style="padding-left:20px" @click="addTitName(item.fixedPhrase)">{{item.fixedPhrase}}</div>
                    <div v-for="(item,index1) in titleAll" :key="index1+'_'" class="selectCon" style="padding-left:6px" @click="addTitName(item.fixedPhrase)">{{item.fixedPhrase}}</div>
                </div>
              </div>

Sortable.create(selectTit, {
          sort:true,
          animation: 150,
            onEnd: function ({ newIndex, oldIndex }) {
              console.log(newIndex,oldIndex)
              let newD = document.getElementsByClassName('titInputTab')[newIndex]
              let oldD = document.getElementsByClassName('titInputTab')[oldIndex]
              if(newIndex>oldIndex) {
                document.getElementsByClassName('titInputTabId')[0].insertBefore(newD,oldD)
                }
              else {
              let oldD1 = document.getElementsByClassName('titInputTab')[oldIndex+1]
                document.getElementsByClassName('titInputTabId')[0].insertBefore(newD,oldD1)
              }
              const currRow = that.model.titleComponents.splice(oldIndex, 1)[0]
              that.model.titleComponents.splice(newIndex, 0, currRow)
              console.log(that.model.titleComponents)
            },
        });

// 多选下拉框样式
.titInputDiv {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 32px;
}
.titInput {
  color: rgba(0, 0, 0, 0.65);
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  min-height: 32px;
  padding: 4px 6px 0 6px;
  line-height: 32px;
  transition: all 0.3s;
  display: flex;
  flex-wrap:wrap;
}
.titInput:hover {
  border-color: #c4ba8f;
  border-right-width: 1px !important;
}
.titInputTab {
  width:auto;
  height: 24px;
  line-height: 24px;
  background-color: #fafafa;
  color: rgba(0, 0, 0, 0.65);
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  padding: 0 8px;
  margin-right: 4px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.titInputTab div {
  padding-right: 4px;
}
.titInputTab i {
  font-size: 11px;
}
.selectTitInputTab {
  position: absolute;
  z-index: 111;
  top: 35px;
  left: 0;
  width: 100%;
  height: auto;
  padding: 2px 6px;
  max-height: 300px;
  overflow-y: scroll;
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  box-shadow: 0 2px 8px 0 #ccc;
  border-radius: 4px;
}
.selectTitInputTabDiv {
}
.selectCon:hover {
  background-color: #f7f6e9;
  border-radius: 8px;
}
.selectCon1 {
  color: rgba(0, 0, 0, 0.45);;
}
.selectCon .selectCon1 {
  height: 36px;
  line-height: 36px;
}
.callError {
  border: 1px solid red;
}