穀粒商城-拖拽(邏輯)
阿新 • • 發佈:2021-11-02
首先,在三級選單中加入draggable,表示是否開啟拖拽節點功能。
之後,加入allow-drop,表示拖拽時判定目標節點能否被放置。該方法有三個引數draggingNode(當前節點), dropNode(放到哪個節點), type(放到哪個節點的哪個位置),type引數有三種情況:'prev'、'inner' 和 'next',分別表示放置在目標節點前、插入至目標節點和放置在目標節點後。
編寫allowDrop方法。
其中countNodeLevel方法是一個遞迴的方法,目的是為了計算出最深的子節點的深度。首先預設maxLevel為0,之後進行遍歷,如果子節點的catLevel大於maxLevel,則把carLevel的值賦給maxLevel,之後把子節點當成引數進行遞迴。最終得到的便是最深子節點的深度maxLevel,可以理解為maxLevel相當於最深子節點的catLevel。
得到maxLevel之後,計算當前節點的層數,用maxLevel-當前節點的catLevel+1便可以得到。
最後進行判斷,如果是拖拽到某一節點裡,那麼判定條件為當前節點層數+放到的某個節點的level需要小於等於3。如果是拖拽到某一結點的前後,則需要用當前節點層數+放到的某個節點的父節點的level需要小於等於3。