CDK Drag Drop does not correctly change the position of images

Question

I created an image gallery and I intend to change the position between them. For this I am using the Drag & Drop cdk library.

My problem is that the exchange of images does not always happen correctly, sometimes I exchange the first image with the second and this exchange does not happen.

How can I have this fully functional, horizontally and vertically?

Is there a way Drag can only start if the image is stored in the mdc-image-list - with-text-protection class?

Thank you !

DEMO

.HTML

  <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;" cdkDropList [cdkDropListData]="data"
           (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let product of data; let  j = index;">
      <li class="mdc-image-list__item" cdkDrag>
        <div class="mdc-image-list__image-aspect-container">
          <ng-container *ngIf="product.image == null; else productImage">
            <img src="" class="mdc-image-list__image imagenotfound">
          </ng-container>
          <ng-template #productImage>
            <img [src]="product.image" class="mdc-image-list__image">
          </ng-template>
        </div>
        <div class="mdc-image-list--with-text-protection">
        <div class="mdc-image-list__supporting mdc-image-list__supporting">
        <span class="mdc-image-list__label">{{product.name}}</span>
        </div>
        </div>
      </li>
    </ng-container>
  </ul>

.ts

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

Eliseo · Accepted Answer · 2020-03-16T20:33:59.830

The only way I find to allow drag and drop in a grid is that each element of the grid was one cdkDropList.

Advertisment: The elements dont' move while we are dragging

Well, as data of each cdkDropList will be an object, the data we want transport and the index

[cdkDropListData]="{item:product,index:j}"

So, our function dropEvent change the array data acording this values

  drop(event: CdkDragDrop<any>) {
    this.data[event.previousContainer.data.index]={...event.container.data.item}
    this.data[event.container.data.index]={...event.previousContainer.data.item}
    event.currentIndex=0;
  }

Yes! we are not force to use the drop as show the examples. Think that the only thing we want is change an array.

There are another thing to do, make that the "dragPlaceHolder becomes an empty div

<div cdkDrag>
     ....
    <div  *cdkDragPlaceholder></div>
</div>

Well, the html is a few complex because the own mdc-image-list is complex. It's important notice that all the cdkDropList must be enclosed in a div ckdDropListGroup

<div cdkDropListGroup>

    <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
        <ng-container *ngFor="let product of data; let  j = index;">
            <li class="mdc-image-list__item" cdkDropList [cdkDropListData]="{item:product,index:j}"
                cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
                <div cdkDrag>
                    <div class="mdc-image-list__image-aspect-container">
                        <ng-container *ngIf="product.image == null; else productImage">
                            <img src="" class="mdc-image-list__image imagenotfound">
          </ng-container>
                            <ng-template #productImage>
                                <img [src]="product.image" class="mdc-image-list__image">
          </ng-template>
                    </div>
                    <div class="mdc-image-list--with-text-protection">
                        <div class="mdc-image-list__supporting mdc-image-list__supporting">
                            <span class="mdc-image-list__label">{{product.name}}</span>
                        </div>
                    </div>
                    <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
                </div>
            </li>
        </ng-container>
    </ul>
</div>

here is your forked stackblitz

NOTE: If someone want a more simple example see this another stackblitz

Hey, I find another amazing example in https://stackblitz.com/edit/angular-nuiviw?file=src%2Fapp%2Fapp.component.html, from c3rber, don't forget check it (the discussion in github is https://github.com/angular/components/issues/13372 — Eliseo, Mar 17 '20 at 08:39
Is there a way to drag the image, using the drag & drop cdk or not, to a "drop" zone and when dropping that image I can extract the data from that dropped image? — mvp Sets, Mar 17 '20 at 12:42
If you can help me, I’ve updated the link. I can create a new question if necessary. — mvp Sets, Mar 17 '20 at 12:48
using @angular/cdk/drag-drop, you has two cdkList, one a list of the images with `[cdkDropListConnectedTo]="[dropZone]"` another one, your div where you want to drop the images: `
` see that it's necesary add a ckdDrag in the drop zone too. In the dropOnZone function you has the "data" of the item you're draging in `event.previousContainer.data[event.previousIndex]`, see the https://stackblitz.com/edit/angular-fg383m?file=src%2Fapp%2Fapp.component.html — Eliseo, Mar 18 '20 at 07:47

CDK Drag Drop does not correctly change the position of images

1 Answers1

Linked