图像上的cdk拖放不起作用

如何解决图像上的cdk拖放不起作用

我想将图像从一个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.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>