Angular 8 cdk drag/drop: Drag image from list to freely draggable zone

Question

I have images list at the right side and from there I want to drag particular image to the right side of the container or drop zone.

I have tried given examples in the official cdk drag and drop but every example is of text.

What I have done so far is I am able to drag images from the left side and able to push that image path on the right list. Instead on the right side I want to drop zone so that any image dragged from the left can freely be dropped at the right side anywhere and get X and Y-axis of the placed images.

possible duplicate of: "Angular cdk Drag drop" for drag items from list and drop to container (unordered)

Here is my code:

TS:

todo = [
    'assets/Process_1.svg',
    'assets/Document_1.svg',
    'assets/Flow_1.svg'
  ];

  done = [
    'done'
  ];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      copyArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }

HTML:

<div cdkDropListGroup>
      <div class="sidebar">

        <div class="example-container">
          <h2>Shapes</h2>

          <div cdkDropList [cdkDropListData]="todo" class="example-list" (cdkDropListDropped)="drop($event)">
            <ul>
              <li *ngFor="let item of todo">
                <img src="{{item}}" cdkDrag>
              </li>
            </ul>
            <!-- <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div> -->
          </div>
        </div>

        


      </div>
      <div class="main-canvas">
        <div class="example-container">
          <h2>Done</h2>

          <div cdkDropList [cdkDropListData]="done" class="example-list" (cdkDropListDropped)="drop($event)">
            <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
          </div>
        </div>

      </div>

    </div>

What I am trying to achieve is something like flow chart.

Answer 1

You forgot to apply the property binding for src in img tag and mentioning of type any in drop method.

<li cdkDrag *ngFor="let item of todo">
   <img [src]="item" width="100" height="100">
</li>

drop(event: CdkDragDrop<any>) {
    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);
    }
  }