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;
}