如何计算可放置项的最小深度?自定义拖拽树组件技术问询
解决拖拽树视图组件的最小深度计算问题
我开发了一款不依赖第三方库的可自由拖拽(D&D)树视图组件,采用带索引与深度的数组作为数据结构,需求如下:
- 除根节点(ROOT,depth=0)外,所有节点及其子节点均可拖拽;
- 垂直拖拽时,索引必须大于0,不可移至根节点上方;
- 水平拖拽时,深度必须大于0,且不能比前一项深度大1(成为其子节点),同时不能破坏放置位置的树结构。
目前多数需求已实现,仅最后一项的最小深度计算存在问题。举个例子:
现有节点结构:
ROOT - A(depth=1) - B(depth=2) - C(depth=2) - D(depth=1) - E(depth=2)
- B无法左移(depth小于A.depth),否则A和B同深度,C会变成B的子节点,破坏原有结构;
- C可以左移,A和C同深度时,B仍为A的子节点,不会破坏结构。
针对这个问题,我总结出通过检查目标索引的前一项节点来计算最小深度的思路,以下是具体场景分析:
场景1:将E移至A和B之间
- 目标位置的前一项是A,其父节点为ROOT;
- 由于A不是ROOT的最后一个子节点,E的depth不能小于A.depth;
- 同时A存在子节点B和C,所以E的depth不能小于A.depth+1;
- 最终取两者的较大值,E的最小depth为
A.depth+1。
场景2:将E移至C和D之间
- 目标位置的前一项是C,其父节点为A;
- 由于C是A的最后一个子节点,E可脱离A的结构且不破坏原有结构,默认最小depth为1;
- C无任何子节点,不对E的深度造成额外限制。
场景3:将C移至D和E之间
- 目标位置的前一项是D,其父节点为ROOT;
- 由于D是ROOT的最后一个子节点,C可脱离原有结构且不破坏布局;
- D存在子节点E,所以C的depth不能小于D.depth+1;
- 最终C的最小depth为
D.depth+1。
内容的提问来源于stack exchange,提问作者Tuan
相关产品推荐
相关产品推荐

