cdk Перетаскивание изображения из одного div в другой в angular

23.10.2020Рубрика: ВопросыАвтор: admin

Я создал два div, один из которых содержит изображение, а другой — пустой. я хочу перетащить это изображение из одного div в другой. Здесь я использую cdk drag and drop и свойство cdkDragFreeDragPosition, но меня это не устраивает, так как я ищу что-то более похожее на это эффект

<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};

Post Views: 136

См. также: SCSS Mixin с использованием корневого селектора

1 angular angular-cdk css drag-and-drop

Комментарии: 1

aneesh muthyala 23.10.2020 в 00:00
cdkDrag — это не Magic. Если вы можете перетащить что-то в место, вам нужно использовать два 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 вы можете использовать * ngFor в div, а каждый 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 с уникальным элементом
```
<div cdkDropList ...>
  <div cdkDrag>
    {{itemOne}}
  </div>
<div>

<div cdkDropList ...>
  <div cdkDrag>
    {{itemTwo}}
  </div>
<div>
```
В этом случае обмен просто
```
 itemTwo={...itemOne}
 itemOne=null
```
Что ж, большое спасибо, я понял использование массивов, но как я могу это сделать без использования массива. Мол, я хочу реализовать перетаскивание только для одного изображения. Было бы это все еще возможно без использования какого-либо массива? — person aneesh muthyala; 27.10.2020
Ответить

Добавить комментарий