Angular拖拽问题：拖动父文件夹时子文件未随动

问题 #

在Angular应用中使用PrimeNG实现文件树拖拽功能时，拖动包含子文件的文件夹，子文件并未随父文件夹移动，反而消失，控制台显示子节点数量为0，但实际该文件夹包含3个子节点。

拖拽开始事件代码 #

onDragStart(event: DragEvent, item: FileItem): void {
  const prepareChildrenForDrag = (children) => children.map(child => ({
      id: child.id,
      label: child.label,
      itemtype: child.itemtype,
      size: child.size, // Include size if available (for files)
      url: child.url,   // Include URL if available (for files)
      children: child.children ? prepareChildrenForDrag(child.children) : [] // Recursively prepare children
  }));

  const dragData = {
      id: item.id,
      label: item.label,
      itemtype: item.itemtype,
      children: item.children ? prepareChildrenForDrag(item.children) : []
  };

  if (event.dataTransfer) {
      try {
          event.dataTransfer.setData('application/json', JSON.stringify(dragData));
          event.dataTransfer.effectAllowed = 'move';
      } catch (error) {
          console.error('Failed to serialize drag data:', error);
      }
  } else {
      console.error('DataTransfer not available');
  }
}

放置事件处理代码 #

handleDrop(event: TreeNodeDropEvent) {
    const dragEvent = event.originalEvent as DragEvent;
    dragEvent.preventDefault();
    dragEvent.stopPropagation();
  
    const dataTransfer = dragEvent.dataTransfer;
    if (!dataTransfer) {
      console.error('No dataTransfer object found');
      return;
    }
  
    const draggedNodeJson = dataTransfer.getData('application/json');
    if (!draggedNodeJson) {
      console.error('No JSON data found in dataTransfer');
      return;
    }
    let dragNode = event.dragNode as FileItem;
    let dropNode = event.dropNode as FileItem;
  
    if (dropNode.itemtype === ITEMTYPE.folder) {
      this.fileService.moveFolder(dragNode, dropNode);
      this.filesUpdated.next(this.fileService.getFiles());
    } else {
      this.messageService.add({ severity: 'error', summary: 'Move Error', detail: 'You cannot drag and drop a file outside a folder' });
    }
  }

期望拖动文件夹时所有子文件一同移动到新位置，但子文件未被包含在移动操作中。

原因分析 #

1. 拖拽数据未被实际使用：你在onDragStart里序列化了包含完整子节点的dragData，但在handleDrop中完全没用到这个数据，而是直接用了event.dragNode。如果PrimeNG的dragNode仅携带父节点的表层数据，未包含子节点引用，就会导致子节点丢失。
2. 移动逻辑未递归处理子节点：如果fileService.moveFolder方法只处理了父文件夹本身，没有递归处理其下的所有子节点的归属关系，会导致子节点未被移动，最终从树结构中消失。

解决方案 #

方案一：使用序列化的完整拖拽数据 #

既然已经在拖拽开始时准备了包含子节点的完整数据，在放置事件中直接使用该数据，替代event.dragNode：

handleDrop(event: TreeNodeDropEvent) {
    const dragEvent = event.originalEvent as DragEvent;
    dragEvent.preventDefault();
    dragEvent.stopPropagation();
  
    const dataTransfer = dragEvent.dataTransfer;
    if (!dataTransfer) {
      console.error('No dataTransfer object found');
      return;
    }
  
    const draggedNodeJson = dataTransfer.getData('application/json');
    if (!draggedNodeJson) {
      console.error('No JSON data found in dataTransfer');
      return;
    }
    // 解析序列化后的完整拖拽节点数据
    const dragNode = JSON.parse(draggedNodeJson) as FileItem;
    const dropNode = event.dropNode as FileItem;
  
    if (dropNode.itemtype === ITEMTYPE.folder) {
      this.fileService.moveFolder(dragNode, dropNode);
      this.filesUpdated.next(this.fileService.getFiles());
    } else {
      this.messageService.add({ severity: 'error', summary: 'Move Error', detail: 'You cannot drag and drop a file outside a folder' });
    }
  }

方案二：确保移动方法递归处理子节点 #

检查并修改fileService.moveFolder的实现，确保它不仅移动父文件夹，还递归处理所有子节点的归属：

// 示例moveFolder实现（需根据你的实际数据结构调整）
moveFolder(sourceFolder: FileItem, targetFolder: FileItem) {
    // 1. 从原父节点移除源文件夹
    const removeFromParent = (node: FileItem, targetId: string): boolean => {
        if (node.children) {
            const index = node.children.findIndex(child => child.id === targetId);
            if (index !== -1) {
                node.children.splice(index, 1);
                return true;
            }
            for (const child of node.children) {
                if (removeFromParent(child, targetId)) {
                    return true;
                }
            }
        }
        return false;
    };
    // 假设根节点为this.rootFiles
    removeFromParent(this.rootFiles, sourceFolder.id);

    // 2. 将源文件夹添加到目标文件夹的子节点中
    if (!targetFolder.children) {
        targetFolder.children = [];
    }
    targetFolder.children.push(sourceFolder);

    // 3. 递归更新子节点的归属信息（比如parentId字段）
    const updateParentId = (node: FileItem, parentId: string) => {
        node.parentId = parentId;
        if (node.children) {
            node.children.forEach(child => updateParentId(child, node.id));
        }
    };
    updateParentId(sourceFolder, targetFolder.id);
}

额外检查点 #

• 确认FileItem接口定义中包含children字段，类型为FileItem[] | undefined。
• 拖动前打印item.children，确认子节点已正确加载，排除数据本身的问题。

内容的提问来源于stack exchange，提问作者user25080199