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

Question

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

<div class="example-container">
  <h1>From</h1>

  <div class="example-list1"
  id = "pic1">
    <div cdkDrag class="example-box" [cdkDragFreeDragPosition]="dragPosition">
      <img width="350px" height="250px" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    </div>
  </div>
</div>


<div class="example-container">
  <h1>To</h1>
  <div class="example-list"
  id = "pic2">
    <div cdkDrag class="example-box">
     
    </div>
  </div>
</div>

ts:
dragPosition = {x: 0, y: 0};

Answer 1

cdkDrag 不是魔术。如果您可以在“地方”拖动“某物”，则需要使用两个 cdkDropList。当我们有两个 cdkDropList 时，您可以将其视为具有两个数组的两个 div

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

cdk-drag 允许将元素从数组一交换到数组二。是的，而是制作类似的东西

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

我们进行拖动

所以，你需要两个cdkDropList，在cdkDropList里面你可以在一个div中使用一个*ngFor，每个div是一个cdkDrag，或者使用一个唯一的元素。再次以两个 div 的例子，我们可以有类似的东西

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

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

但cdkDropList 不是必需的列表。您可以拥有一个带有唯一元素的 cdkDropList

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

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

在这种情况下，交换很简单

 itemTwo={...itemOne}
 itemOne=null