如何在图像上实现拖放，改变其位置

Question

[我开发了一个向我展示几个图像的滑块。

在顶部（大图像和滑块所在的位置），我将初始图像作为主图像。

在底部，我有辅助图像（请参见下图）。>>

是否有一种方法可以将图像拖动到包含滑块的div中以更改顺序？基本上，我打算将小盒子中的图像与大盒子中的第一张图像交换。

我也可以水平改变小图像的顺序吗？

谢谢。

DEMO - Stackblitz

code

 <div class="col-md-6" style="overflow-y: auto;"  (cdkDropListDropped)="drop($event)">
        <div class="drop" [style.border-width.px]="imagens.length > 0 ? 0: 3">
          <div class="abc">
              <ngb-carousel style="outline: none;" id="carousel" #carousel *ngIf="imagens" (slide)="change($event)">
                <ng-template *ngFor="let imgIdx of imagens; let i = index" [id]="i" ngbSlide>
                  <div class="picsum-img-wrapper">
                    <img [src]="imgIdx.Imagem" style="border-radius: 8px;" class="img-responsive Images">
                      </div>                    
                </ng-template>              
              </ngb-carousel>            
          </div>
        </div>
        <div class="row">
          <div class="Upcard" *ngFor="let imgIdx of imagens | slice:1" >
            <img class="img-responsive" [src]="imgIdx.Imagem" style="width: 100%; height: 100%">
          </div>
        </div>
      </div>
我尝试使用此功能，并添加了html cdkdrag，但不，它没有用。

   drop(event: CdkDragDrop<string[]>) {
     moveItemInArray(this.imagens, event.previousIndex, event.currentIndex);
   }

   dropBig(event: CdkDragDrop<string[]>) {
     moveItemInArray(this.imagens, event.previousIndex, 0);
   }

我开发了一个向我展示几个图像的滑块。在顶部（大图像和滑块所在的位置），我将初始图像作为主图像。在底部，我有第二个...

Answer 1

cdk拖放，在两个cdkDropList之间拖动非常有用。通常，它用于交换两个数组的值（cdkDropList的cdkDropListData）。因此，您需要先定义dckDropList和元素dragables