javascript - 拖拽dom节点，如何找到最近的节点？

Question

数据结构（集合）如下（parentid为null表示根节点。），表示页面上一系列 dom 节点：

[
  {
    id: 'xxxxx',
    parentId: 'yyyyyy',
    width: 120,
    height: 240,
    top: 50,
    left: 160
  }
]

交互逻辑：

拖拽其中某一个节点，表示移动当前节点（及其所有子节点），如果移动到某一个节点附近（节点后面 150px，上下不超过100px），表示设置为该节点的子节点。（当然，父节点需要排除选中的节点及其所有子节点）

激活规则如下：

现在的难点在于，如果一个节点的子节点很多，如果想移动一个节点到该节点的所有子节点最后面，那么很可能会超过 150px 的限制；

综上所述，如何能找到最近的父节点呢？

注意需要排序，如上图“Z”可能需要放到K、L、M、N的后面，所以不止需要确定“父节点”，还需要确定前面或者后面一个兄弟节点。

Answer 1

### 回答

要解决这个问题，你可以采取以下步骤来找到最近的父节点及其插入位置：

1. **遍历所有节点**：首先，遍历所有节点，排除掉正在拖拽的节点及其所有子节点。

2. **计算距离**：对于每一个符合条件的父节点，计算拖拽节点（及其所有子节点作为一个整体）的矩形框与该父节点每个子节点的矩形框之间的距离。这里的距离可以是矩形框中心之间的距离，也可以是拖拽节点矩形框左上角与该父节点子节点矩形框边缘的最小距离。

3. **考虑边界条件**：根据题目描述的交互逻辑，确保拖拽节点放置在目标父节点子节点后面不超过150px，且上下不超过100px。如果有多个符合条件的子节点，选择距离拖拽节点最近的子节点，然后根据该子节点的位置决定是放在它之前还是之后。

4. **确定插入位置**：
   - 如果最近的子节点使得拖拽节点可以放在其后（不超过150px的水平距离限制），则将该子节点作为参考点，决定拖拽节点成为其后继兄弟节点。
   - 如果没有合适的子节点作为参考（例如，所有子节点都太远），则直接将拖拽节点作为父节点的直接子节点，放在所有现有子节点之后。

5. **更新数据结构**：根据找到的父节点和插入位置，更新数据结构中节点的`parentId`字段，并调整相关节点的层次结构。

通过上述步骤，你可以有效地找到最近的父节点及其合适的插入位置，确保拖拽操作符合题目中描述的交互逻辑。