Angular 如何保持角形CDK掉落项目的位置？

我试图建立一个界面，我有一个图像和一些图标的底部。我希望这些图标被放到图像上（作为一个副本，我可以这样做），图像上被放下的图标应该保持在它被放下的位置。下面是我的代码的样子：

HTML

TS

//此数组将包含已删除图标的数据
选定产品=[]；
//此数组包含实际图标
产品=[“可访问性”、“飞机”、“光圈”]
drop（事件：CdkDragDrop）{
console.log（事件）；
if（event.previousContainer==event.container）{
moveItemInArray(
event.container.data，
event.previousIndex，
event.currentIndex
);
}否则{
复制阵列项目(
event.previousContainer.data，
event.container.data，
event.previousIndex，
event.currentIndex
)
}
}

发生的事情是，我能够将图标放到图像上，但图标进入列表模式，并在左上角对齐，而不是保持其放置位置。请参见底部图像以获取参考

你知道我该如何保持被放下的位置，并在图标实际放下的地方显示图标，而不是在左上角以列表的形式显示它们吗

<ion-content [fullscreen]="true">
  <!--THIS ROW CONTAINS MY IMAGE WHERE THE ICONS FROM THE BOTTOM ROW DROPS-->
  <ion-row>
    <ion-col>
        <div 
          cdkDropList
          #dropList="cdkDropList"
          [cdkDropListData]="selectedProducts" 
          [cdkDropListConnectedTo]="[dragList]" 
          (cdkDropListDropped)="drop($event)"
          style="background: url('/assets/house.jpeg'); height: 700px;">
          <div *ngFor="let item of selectedProducts;">
            <div cdkDrag [cdkDragDisabled]="true">
              <ion-icon style="font-size: 30px; color: red;" name={{item}}></ion-icon>
            </div>
          </div>
        </div>
    </ion-col>
  </ion-row>

  <!--THESE CONTAINS THE DRAGGABLE ICONS THAT DROPS TO ABOVE ROW WITH IMAGE-->
  <ion-row style="bottom: 0px; position: fixed; width: 100%;"
    cdkDropList 
    #dragList="cdkDropList"
    [cdkDropListData]="products" 
    [cdkDropListConnectedTo]="[dropList]" 
    (cdkDropListDropped)="drop($event)">
    <ion-col class="ion-text-center" *ngFor="let item of products" cdkDrag>
      <ion-icon style="font-size: 30px; color: red;" name={{item}}></ion-icon>
    </ion-col>
  </ion-row>
</ion-content>

//THIS ARRAY WILL CONTAIN DATA OF ICONS THAT ARE DROPPED
selectedProducts = [];
//THIS ARRAY CONTAINS THE ACTUAL ICONS
products = ['accessibility','airplane','aperture']

drop(event: CdkDragDrop<string[]>) {
    console.log(event);
    if(event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      copyArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      )

    }
  }