Angular:如何获取拖放了其他元素的项目的元素ID

Angular是一种流行的前端开发框架，用于构建单页应用程序。在Angular中，要获取拖放了其他元素的项目的元素ID，可以使用Angular的拖放功能和事件绑定。

首先，需要在组件中引入Angular的拖放模块：

import { DragDropModule } from '@angular/cdk/drag-drop';

然后，在组件的模板中，可以使用cdkDrag指令将元素标记为可拖动的项目，并使用cdkDropList指令将元素标记为可接受拖放的容器。同时，可以使用cdkDropListDropped事件来监听拖放操作完成的事件。

<div cdkDropList (cdkDropListDropped)="onItemDropped($event)">
  <div cdkDrag [id]="item.id" *ngFor="let item of items">{{ item.name }}</div>
</div>

在组件的代码中，可以定义onItemDropped方法来处理拖放操作完成的事件。通过事件参数可以获取拖放的源元素和目标容器的信息。可以使用event.item.element.nativeElement.id来获取拖放的项目的元素ID。

onItemDropped(event: CdkDragDrop<any>) {
  const droppedItemId = event.item.element.nativeElement.id;
  console.log('Dropped item ID:', droppedItemId);
}

这样，当拖放操作完成时，就可以获取到拖放了其他元素的项目的元素ID了。

关于Angular的拖放功能的更多详细信息，可以参考腾讯云的Angular开发文档：Angular开发文档