Css cdk以角度将图像从一个div拖放到另一个div

我创建了两个div，一个包含图像，另一个为空。我想将该图像从一个div拖放到另一个div。在这里，我使用cdk拖放和cdkDragFreeDragPosition属性，但我并不满意，因为我正在寻找类似的东西

从…起
到
ts:
拖动位置={x:0，y:0}；

cdkDrag不是魔法。如果可以将“某物”拖动到“位置”，则需要使用两个cdkDropList。当我们有两个cdkDropList时，您可以将其视为两个div和两个数组

<div *ngFor="let item of arrayOne">
  {{item}}
</div>
<div *ngFor="let item of arrayTwo">
  {{item}}
</div>

但是

cdkDropList

不是必需的，而是一个列表。您可以拥有具有唯一元素的cdkDropList

<div cdkDropList ...>
  <div cdkDrag>
    {{itemOne}}
  </div>
<div>

<div cdkDropList ...>
  <div cdkDrag>
    {{itemTwo}}
  </div>
<div>

---

非常感谢，我理解使用数组，但是如果不使用数组，我怎么能做到呢。比如，我只想对单个图像实现拖放。在不使用任何数组的情况下，这仍然是可能的吗？

<button (click)="interchange(index1,index2)">interchange</button>
interchange(index1,index2)
{
   const element=this.arrayOne.splice(index1,1)
   this.arrayTwo.splice(index2,0,element[0])
}

<div cdkDropList ...>
  <div *ngFor="let item of arrayOne" cdkDrag>
    {{item}}
  </div>
<div>

<div cdkDropList ...>
  <div *ngFor="let item of arrayTwo" cdkDrag>
    {{item}}
  </div>
<div>

<div cdkDropList ...>
  <div cdkDrag>
    {{itemOne}}
  </div>
<div>

<div cdkDropList ...>
  <div cdkDrag>
    {{itemTwo}}
  </div>
<div>

 itemTwo={...itemOne}
 itemOne=null