自用-树结构数据拖拽排序简单思维逻辑

150 阅读2分钟

1.三个核心字段,父ID,树路径(父路径+主键ID),排序值(从小到大排列)

2.前后端交互逻辑 :前端传入拖拽节点ID,悬停节点ID,悬停节点方向,悬停父ID

3.后端处理逻辑:

查询拖拽节点信息,悬停节点信息,悬停父节点信息

根据悬停父节点信息设置拖拽节点新的父ID,拼接父路径

获取悬停节点同一父路径下的节点列表,判断是否跨树

如果跨树,根据悬停节点方向,拖拽节点拖拽到悬停节点上方时,将悬停节点排序值传给拖拽节点,遍历节点列表,节点排序值大于等于悬停节点排序值,将排序值设置为下一节点的排序值,最后一位节点排序值设置为整个树排序值最大+1

如果跨树,根据悬停节点方向,拖拽节点拖拽到悬停节点下方时,获取悬停节点的下方节点,将悬停下方节点排序值传给拖拽节点,遍历节点列表,节点排序值大于等于悬停下方节点排序值,将排序值设置为下一节点的排序值,最后一位节点排序值设置为整个树排序值最大+1。(当拖拽点处于最后一位时,不修改节点列表排序值,拖拽点排序值设置为整个树排序值最大+1)

如果不跨树,根据悬停节点方向,拖拽节点拖拽到悬停节点上方时,将悬停节点排序值传给拖拽节点,遍历节点列表,当节点排序值大于等于悬停节点排序值并且小于拖拽节点排序原排序值时,将排序值设置为下一节点的排序值,最后一位节点排序值设置为整个树排序值最大+1。去除节点列表中原拖拽节点,添加修改后的拖拽节点

如果不跨树,根据悬停节点方向,拖拽节点拖拽到悬停节点下方时,获取悬停节点的下方节点,将悬停下方节点排序值传给拖拽节点,遍历节点列表,当节点排序值大于等于悬停下方节点排序值并且小于拖拽节点排序原排序值时,将排序值设置为下一节点的排序值,最后一位节点排序值设置为整个树排序值最大+1。(当拖拽点处于最后一位时,不修改节点列表排序值,拖拽点排序值设置为整个树排序值最大+1)去除节点列表中原拖拽节点,添加修改后的拖拽节点

最后批量修改节点列表

潦草流程图

image.png