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

Question

我开发了一个可以显示多张图片的滑块。

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

在底部我有次要图像（见下图）。

有没有办法将图像拖动到包含滑块的 div 以更改顺序？基本上我打算交换小盒子里的一张图片和大盒子里的第一张图片。

我也可以横向改变小图的顺序吗？

谢谢。

DEMO - Stackblitz

代码

 <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）。所以你需要先定义 cdkDropList 和元素 dragables (cdkDrag)

所以，首先将 angular.json 更改为使用 cdk 8.2.3，-您使用的是 Angular 8，而不是混合版本-

"@angular/cdk": "^8.2.3",

然后创建两个数组，imagens 和 imagens2(*) 并将您的 .html 更改为 - 查看哪里有 cdkDropList 和 cdkDrag-

<div class="col-md-6" style="overflow-y: auto;">
    <div class="drop" [style.border-width.px]="imagens.length > 0 ? 0: 3">
        <div class="abc" cdkDropList #dropList="cdkDropList" cdkDropListOrientation="horizontal"
            [cdkDropListData]="imagens" 
            [cdkDropListConnectedTo]="[dragList]" 
            (cdkDropListDropped)="drop($event)">
            <ngb-carousel data-interval="false" 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" cdkDrag [cdkDragDisabled]="true">
                        <img [src]="imgIdx.Imagem" style="border-radius: 8px;" class="img-responsive Images">
                      </div>
                </ng-template>
            </ngb-carousel>
        </div>
    </div>

    <div class="row" cdkDropList #dragList="cdkDropList" cdkDropListOrientation="horizontal"
        [cdkDropListData]="imagens2" 
        [cdkDropListConnectedTo]="[dropList]" 
        (cdkDropListDropped)="drop($event)">
        <div class="Upcard" *ngFor="let imgIdx of imagens2" cdkDrag>
            <img class="img-responsive" [src]="imgIdx.Imagem" style="width: 100%; height: 100%">
          </div>
        </div>
    </div>

嗯，一般来说函数 drop 就像

  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);
    }
  }

但这使得当您将图像从 imagens2 拖放到 imagens 时，拖动的图像将添加到数组 imagens 并从数组 imagens2 中删除 - 您移动图像-

如果你想交换你简单使用拼接的两个图像。记住它只改变两个数组

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      const imagen = { ...(event.container.data[event.currentIndex] as any) };
      const previousImagen = {
        ...(event.previousContainer.data[event.previousIndex] as any)
      };
      event.container.data.splice(event.currentIndex, 1, previousImagen);
      event.previousContainer.data.splice(event.previousIndex, 1, imagen);
    }
  }

好吧，如果你不想 "interchange" 这两个图像，否则从滑块中删除拖动的图像，更改函数 drop。记住 event.container.data 是你放置图像的数组（在 event.currentIndex 中），event.previousContainer.data 是你拖动图像的数组（event.previousIndex 给你拖动的图像）

见your forked stackblitz

(*) 我认为在两个不同的数组中，我 "clone" 你的数组使用

  imagens2 = this.imagens.map(x => ({ ...x }));

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

How to implement drag & Drop on an image, changing its position

drag-and-drop

draggable

typescript

angular

angular-cdk