I have implemented an image gallery and am working on rearranging the position of the images using the Drag & Drop cdk library.
However, I am facing an issue where the swapping of images does not always occur correctly; sometimes when attempting to exchange the first image with the second, the swap does not happen as expected.
Is there a way to ensure smooth functionality for both horizontal and vertical repositioning of the images?
Furthermore, I would like to know if there is a method to initiate dragging only when the image is contained within the mdc-image-list - with-text-protection class.
Thank you in advance!
.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
);
}
}