angular-material - Angular 材质 cdk 拖放，如何获取目标（鼠标目标）元素？

Question

我找不到任何关于如何使用 cdk 拖放来获取放置元素的目标的文档。下面是将项目从box1 div 拖动到Shoppingbasket div 的示例代码。这里我期望目标应该是box2 div。但我收到Shoppingbasket div.here 是 stackblitz 示例

HTML

<div cdkDropListGroup>
  <div class="example-container">
    <h2>Available items</h2>
    <div cdkDropList [cdkDropListData]="items" class="example-list" cdkDropListSortingDisabled
        (cdkDropListDropped)="drop($event)">
        <div id="box1" class="example-box" *ngFor="let item of items" cdkDrag>{{item}}</div>
    </div>
  </div>
  <div class="example-container2">
    <h2>Shopping basket</h2>
    <div id="Shoppingbasket" cdkDropList [cdkDropListData]="basket" class="example-list"
        (cdkDropListDropped)="drop($event)">
        <div id="box2" class="example-box1" cdkDragHandle></div>
    </div>
  </div>
</div>          

TS

   drop($event){
      if (event.previousContainer === event.container) {
          moveItemInArray(event.container.data, event.previousIndex,event.currentIndex);
      } else {
         transferArrayItem(event.previousContainer.data,event.container.data,event.previousIndex);
      }
   }

Answer 1

event.targetcdk 拖放事件中没有，但您可以event在需要时手动将属性添加到对象，如下所示：

event.target = event.container.element.nativeElement;