Angular拖拽排序列表中如何获取父节点信息

看起来你在用Angular的拖拽指令（从dnd-list这类语法判断）搭建嵌套卡片的拖拽环境，核心痛点是找不到获取目标父卡片信息的方法对吧？我之前做类似嵌套拖拽功能时也踩过这个坑，分享几个亲测可行的方案：

方案1：直接在回调中传递父卡片参数 #

你的代码里已经用到了dnd-dragover回调，最简单的方式就是把父卡片信息直接作为参数传入回调函数。修改模板如下：

<ul 
  dnd-list="containers" 
  dnd-allowed-types="['container']" 
  dnd-external-sources="true"
  dnd-dragover="dragoverCallback($event, index, external, type, callback, parentCard)"
>
  <!-- 子卡片渲染内容 -->
</ul>

然后在组件的回调函数里直接接收这个参数：

dragoverCallback(event, index, external, type, callback, parentCard) {
  // 这里的parentCard就是你要的目标父卡片信息
  console.log('当前拖拽的目标父卡片:', parentCard);
  // 别忘了执行callback完成拖拽前置逻辑
  callback();
}

方案2：通过事件对象获取父元素绑定数据 #

如果模板里不方便直接传参，也可以借助事件对象找到目标父容器，再提取绑定的数据。比如：

dragoverCallback(event, index, external, type, callback) {
  // 找到带dnd-list指令的目标父容器元素
  const targetContainer = event.target.closest('[dnd-list]');
  // 从元素的data属性中取出父卡片信息（需要先在模板里绑定）
  const parentCardStr = targetContainer?.dataset?.parentCard;
  const parentCard = parentCardStr ? JSON.parse(parentCardStr) : null;
  
  console.log('目标父卡片:', parentCard);
  callback();
}

对应的模板需要给ul加上数据属性：

<ul 
  dnd-list="containers" 
  dnd-allowed-types="['container']" 
  dnd-external-sources="true"
  dnd-dragover="dragoverCallback($event, index, external, type, callback)"
  [attr.data-parent-card]="JSON.stringify(parentCard)"
>
</ul>

方案3：扩展拖拽指令注入父卡片信息 #

如果上面的方法都不满足需求，还可以自定义一个指令来扩展现有拖拽逻辑，在拖拽事件触发时主动把父卡片信息存入拖拽数据中：

@Directive({
  selector: '[dnd-list][parent-card]'
})
export class ParentCardDragDirective {
  @Input('parent-card') parentCard: any;

  @HostListener('dragover', ['$event'])
  onDragOver(event: DragEvent) {
    if (event.dataTransfer) {
      // 把父卡片信息转成字符串存入dataTransfer
      event.dataTransfer.setData('parentCard', JSON.stringify(this.parentCard));
    }
  }
}

然后在模板中使用这个自定义指令：

<ul 
  dnd-list="containers" 
  dnd-allowed-types="['container']" 
  dnd-external-sources="true"
  parent-card="parentCard"
>
</ul>

最后在回调中取出数据：

dragoverCallback(event, index, external, type, callback) {
  const parentCardStr = event.dataTransfer?.getData('parentCard');
  const parentCard = parentCardStr ? JSON.parse(parentCardStr) : null;
  
  console.log('目标父卡片:', parentCard);
  callback();
}

核心思路其实都是在拖拽事件触发时，把目标父容器的信息传递到回调逻辑中，不同方案适配不同的代码场景，你可以根据自己的项目结构选最顺手的那个。

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