css - cdk拖放图像不起作用

Question

我想将图像从一个 div 拖到另一个 div。我尝试创建两个包含图像 src 的数组并循环遍历所有 src，从而显示两个列表，以便我可以通过创建函数 (cdkDropListDropped)="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,
                        event.currentIndex);
    }
  }

但在这里我只使用一个图像并且没有使用任何数组。那么，我该如何拖放，我不知道我应该使用什么函数来将图像完美地拖放到另一个 div 中。

html:

<div class="example1"
  cdkDropList
  id = "pic1"
  [cdkDropListConnectedTo]="['pic2']"
  style="background-color:red;"
  >
    <div cdkDrag class="example-box">
      <img width="350px" height="250px" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    </div>
</div>

<div class="example2"
  cdkDropList
  id = "pic2"
  style="background-color:yellow;"
  [cdkDropListConnectedTo]="['pic1']"
  >
    <div cdkDrag class="example-box">
    
    </div>
</div>