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

Я создал два 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};

См. также:  Как удалить заполнение по умолчанию в раскрывающемся списке с возможностью поиска во флаттере?
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. aneesh muthyala

    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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: