如何在子组件dragstart事件中通过DOM获取父组件ID？

当然可以通过DOM实现这个需求，下面是几种实用的实现方式：

• 使用Element.closest()方法（推荐）
  这个方法能向上遍历DOM树，匹配最近的符合选择器的父元素，不管子组件和父组件之间隔多少层级都能生效，灵活性很强。

  HTML结构示例：

  <div id="parent-456" class="component-parent">
    <div class="child-wrapper">
      <div draggable="true" class="draggable-item">可拖拽子组件</div>
    </div>
  </div>
  

  JS事件处理示例：

  document.querySelectorAll('.draggable-item').forEach(item => {
    item.addEventListener('dragstart', function(e) {
      // 查找最近的父级组件元素
      const parentComp = this.closest('.component-parent');
      if (parentComp?.id) {
        // 将父组件ID存入dataTransfer，供后续拖放环节使用
        e.dataTransfer.setData('text/plain', parentComp.id);
        console.log("来源父组件ID：", parentComp.id);
      }
    });
  });
  

• 直接使用parentElement（适用于直接父子关系）
  如果子组件是父组件的直接子元素，用这个方法更高效：

  document.querySelector('.draggable-item').addEventListener('dragstart', function(e) {
    const parent = this.parentElement;
    if (parent?.id) {
      e.dataTransfer.setData('text/plain', parent.id);
    }
  });
  

注意事项 #

• 要确保目标父组件确实设置了id属性，否则会返回空字符串，建议添加存在性判断避免报错。
• 通过dataTransfer存储父ID是拖放操作的标准做法，后续的dragover、drop事件中可以用e.dataTransfer.getData('text/plain')取出该值。

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