cdk drag and drop on images is not working - css

Question

I want to drag an image from one div to another div. I tried creating two arrays containing src of images and looping through all the src thereby two lists will be displayed so that I'm able to drag and drop easily by creating a function (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);
}
}
but here I'm using only a single image and no array is being used. So, how can I drag and drop and I'm not aware of the function I should use for an image getting drop perfectly into another 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>