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

Posted 2023-05-08

【中文标题】如何在图像上实现拖放，改变其位置

【英文标题】：How to implement drag & Drop on an image, changing its position

【发布时间】：2020-06-01 19:58:09

【问题描述】：

我开发了一个滑块，向我展示了几张图片。

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

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

有没有办法将图像拖动到包含滑块的 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);
   

【参考方案1】：

cdk 拖放 在两个 cdkDropList 之间拖动很有用。通常它用于交换两个数组的值（cdkDropList 的 cdkDropListData）。所以你需要先定义 cdkDropList 和可拖动元素 (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 时，拖动的 imagen 将添加到数组 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);
    
  

好吧，如果您不想“交换”两个图像，或者从滑块中删除拖动的图像，请更改功能 drop。记住 event.container.data 是你放置 imagen 的数组（在 event.currentIndex 中）， event.previousContainer.data 是你拖动 imagen 的数组（event.previousIndex 给你拖动的 imagen）

见your forked stackblitz

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

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

【讨论】：

天啊！！！多么棒的工作！我希望你有很多票！非常感谢您的问候！

图像在多行时不起作用。