Css 图像上的cdk拖放不起作用

我想将图像从一个div拖到另一个div。我尝试创建两个包含图像src的数组，并在所有src中循环，因此将显示两个列表，以便通过创建函数（cdkdroplistdroped）=“drop（$event）”轻松拖放图像

但这里我只使用一个图像，没有使用数组。所以，我怎么可以拖放，而我不知道我应该使用什么函数将图像完美地拖放到另一个div中

html:

首先，我会检查上示例的源代码，以便更好地了解cdk拖放的工作原理。好的，我已经看过了。我只使用这些示例获得了一些知识，但我找不到任何与图像和从一个div拖放到另一个div相关的示例。如果你能找到plz帮助我处理这些示例，你在这里不是已经有了答案吗：那就是使用数组处理多个图像。在这里，我只寻找一个没有使用任何数组的图像

    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 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>