小编Meq*_*qwz的帖子

这个问题已经在 SO 上多次提出，但不是最近，这里的例子比我见过的其他例子更完整。拖放用材质树的最好的FPGA实现是这样的一个张贴在这里的媒体通过@ inorganik。

我在这里克隆了 StackBlitz。

但是，我的问题是只有在节点上至少有一个子元素时才能移动节点。例如，如果您从 Application 中删除所有子节点，然后尝试将其添加回 Application。

如果节点有兄弟节点，则删除的节点只会插入到父节点中，在第 232 行：

    // insert node 
    const newSiblings = findNodeSiblings(changedData, nodeAtDest.id);
    if (!newSiblings) return;
    newSiblings.splice(relativeIndex, 0, nodeToInsert);

对我来说，解决方案是跟踪用户在放下移动节点时是否将其悬停在另一个节点上似乎合乎逻辑，然后假设用户希望将悬停节点设为父节点，请查看屏幕截图：

我的问题是：这是解决这个问题的最佳方法吗？如果是这样，如何使用 Angular Drag Drop CDK 跟踪悬停的节点？

更新：

我已经让这个功能部分工作了。我在这里更新了StackBlitz。

我dragHover根据我发现的 mat-tree DnD 的其他实现更新了该方法，它根据用户将悬停节点拖动到右侧的距离设置插入模式：

  dragHover(node: FileFlatNode) {
    // untype the event
    const newEvent: any = event;
    const percentageX = newEvent.offsetX / newEvent.target.clientWidth;
    if (percentageX > .25) {
      this.dragNodeInsertToParent = true;
    } else {
      this.dragNodeInsertToParent = false; …