cdk将图像从一个div拖放到另一个div中 [英] cdk Drag and drop of an image from one div to another in angular

问题描述

我创建了两个div，一个包含图片，另一个为空.我想将该图像从一个div拖放到另一个div.在这里，我使用的是cdk拖放和cdkDragFreeDragPosition属性，但我对此不太满意，因为我正在寻找类似这样的内容

I have created two divs one containing an image and other is empty. i want to drag and drop that image from one div to another. Here I'm using cdk drag and drop and cdkDragFreeDragPosition property but I'm not satisfied with this as I'm looking for something more like this 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};

推荐答案

cdkDrag不是Magic.如果您可以拖动某物"，在地方"中您需要使用两个cdkDropList.当我们有两个cdkDropList时，您可以将其视为具有两个数组的两个div

cdkDrag is not Magic. If you can Drag "something" in a "place" you need use two cdkDropList. When we has two cdkDropList you can think about this as two divs with two arrays

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

cdk-drag允许将元素从数组1交换到数组2.是的，而是做类似的事情

cdk-drag allow interchange the elements from array-one to array-two. Yes, instead make something like

<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为例，我们可以得到类似

So, you need two cdkDropList, inside the cdkDropList you can use a *ngFor in a div, and each div is a cdkDrag, or use an unique element. Again with the example of two divs, we can has something like

<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

But a cdkDropListis not necesary was a list. You can has a cdkDropList with an unique element

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

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

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

In this case, the interchange is simply

 itemTwo={...itemOne}
 itemOne=null

这篇关于cdk将图像从一个div拖放到另一个div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！