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