vue-draggable部分保留原位 部分可拖拽 不可改变不可拖拽元素位置
<draggable class="list" :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:false,scrollSensitivity:200}" v-model="storeList" @end="end" handle=".mover" filter=".forbid" :move="onMove">
<div class="route-item " v-for="item,index in listRouteToady.storeList" :key="index">
<div><span>{{item.slot}}.</span>{{item.storeName}}</div>
<div :class="item.slot==1||item.slot==3?'mover forbid':'mover'"><span>本月还没有完成</span><img v-if="!(item.slot==1||item.slot==3)" :src="dragIcon" alt=""></div>
</div>
</draggable>
onMove (e) {
console.log(e);
//不允许停靠
if (e.relatedContext.element.slot == 3 || e.relatedContext.element.slot == 1) return false;
//false表示阻止拖拽
return true;
},
end () {
let slotData = []
let storeList = []
//筛选出修改位置的数组 再将保留原位置插入回原位
storeList = this.storeList.filter(item => {
return !(item.slot == 1 || item.slot == 3)
})
this.storeList.forEach((item, index) => {
if (item.slot == 1 || item.slot == 3) {
storeList.splice(item.slot - 1, 0, item)
}
})
console.log(storeList)
storeList.forEach((item, index) => {
slotData.push({
id: item.id,
sort: index + 1
})
})
this.storeList = storeList
},