0

I want to drag an image from one div to another div. I tried creating two arrays containing src of images and looping through all the src thereby two lists will be displayed so that I'm able to drag and drop easily by creating a function (cdkDropListDropped)="drop($event)"

    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }

but here I'm using only a single image and no array is being used. So, how can I drag and drop and I'm not aware of the function I should use for an image getting drop perfectly into another div.

html:

<div class="example1"
  cdkDropList
  id = "pic1"
  [cdkDropListConnectedTo]="['pic2']"
  style="background-color:red;"
  >
    <div cdkDrag class="example-box">
      <img width="350px" height="250px" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    </div>
</div>

<div class="example2"
  cdkDropList
  id = "pic2"
  style="background-color:yellow;"
  [cdkDropListConnectedTo]="['pic1']"
  >
    <div cdkDrag class="example-box">
    
    </div>
</div>
aneesh muthyala
  • 15
  • 1
  • 6
  • I would start by checking the source-code of the examples found on https://material.angular.io/cdk/drag-drop/examples to get a better understanding how things work with cdk drag&drop.. – iLuvLogix Oct 23 '20 at 14:59
  • Well, I already gone through. I got some knowledge using those examples only but I couldn't find any example related to images and dragging-dropping from one div to another. If you could find plz help me with those examples – aneesh muthyala Oct 23 '20 at 15:07
  • Didn't you already had an answer here: https://stackoverflow.com/questions/64494404/cdk-drag-and-drop-of-an-image-from-one-div-to-another-in-angular – iLuvLogix Oct 23 '20 at 15:17
  • Well, that is using arrays for multiple images. Here, I'm looking for only a single image without using any array – aneesh muthyala Oct 27 '20 at 07:48

0 Answers0