You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何计算可放置项的最小深度?自定义拖拽树组件技术问询

解决拖拽树视图组件的最小深度计算问题

我开发了一款不依赖第三方库的可自由拖拽(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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.30 13:03:13