vue-draggable部分保留原位 部分可拖拽 不可改变不可拖拽元素位置

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