如何在Angular CDK DragAndDrop的onDrop函数中获取拖拽元素的innerText并使用？

当然有办法啦！你可以通过CdkDragDrop事件对象里的event.item.element.nativeElement来访问拖拽元素的DOM节点，进而获取它的innerText。

下面是修改后的代码示例，直接替换你原来的onDrop函数就行：

onDrop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    // 获取拖拽元素的原生DOM节点
    const draggedElement = event.item.element.nativeElement;
    // 提取innerText，建议做trim处理避免多余空格
    const DraggedElementInnerText = draggedElement.innerText.trim();
    
    console.log(DraggedElementInnerText);
    this.addItemInPostion(event.currentIndex, DraggedElementInnerText);
  }
}

小补充： #

• event.item对应当前拖拽的CdkDrag实例，通过它的element属性能拿到ElementRef，再用nativeElement就能直接操作原生DOM元素了。
• 如果你的拖拽元素内部有多层嵌套结构，可能需要根据实际DOM结构调整文本获取方式（比如用textContent或者定位到具体子元素），但innerText在大多数简单场景下都能满足需求。

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