Question

我开发了一个滑块，可以为我显示几张图像。

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

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

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

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

谢谢。

代码

var val = ReturnNamedTupple();

Console.WriteLine($"The max value is {val.Max} and it is located in the {val.Pos}");

我尝试使用此功能，并添加了html cdkdrag，但没有，它没有用。

 <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>

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更改为-see哪里有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(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);
    }
  }

但是，这使得当您将图像块image2放到图像块上时，拖动的图像块将添加到阵列图像块中，并从阵列图像块2中删除-您可以移动图像-

如果要交换两个图像，只需使用拼接即可。记住，只改变两个数组

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

好吧，如果您不想“互换”这两个图像，否则从滑块中删除拖动的图像，请更改功能下拉菜单。记住event.container.data是放置imagen的数组（在event.currentIndex中），event.previousContainer.data是拖动图像的数组（event.previousIndex给您拖动的imagen）

请参阅your forked stackblitz

（*）我认为在两个不同的数组中，我使用“克隆”数组

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

如何在图像上实现拖放操作，更改其位置

1 个答案: