角度拖动/排序图像

Question

我创建了一个预览图像的功能。选择多张图像时，它们会放在框中（1个大而其余的小）。

我使用Angular Material拖放功能对图像进行排序/更改其位置，但是无法在大框中更改图像。发生的情况是，将一个图像插入到大框中，并将该图像重复到了小框中……目标是拥有所有不同的图像，然后将图像拖到大框中将在图像之间发生位置变化。

StackBlitz

HTML

<div class="drop">
      <div class="cont" *ngIf="urls.length === 0">
        <div class="browse" >
            Upload files
          </div>
        <div class="desc">
          Click to upload
        </div>       
      </div>
      <ng-container *ngIf="urls.length > 0">
          <img [src]="urls[0]">
        </ng-container>
        <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
    </div>

    <div class="row" cdkDropList  (cdkDropListDropped)="drop($event)">
      <div class="Upcard" *ngFor="let url of urls" cdkDrag>
          <img [src]="url">
      </div>
    </div>

Component ts

files:any;
  urls = new Array<string>();
  detectFiles(event) {
    // this.urls = [];
    this.files = event.target.files;
    if (this.files.length < 7) {

      for (let file of this.files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
      }
    }
  }

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

Answer 1

在此示例中，您可以使用此替代方法来实现（受that启发：

<div cdkDropListGroup>
  <div>
    <div
      cdkDropList
      [cdkDropListData]="mainImages"
      class="main-image-container"
      (cdkDropListDropped)="drop($event)">
      <div class="main-image" *ngFor="let item of mainImages" cdkDrag>{{item}}</div>
      // There will be only one item here. 
    </div>
  </div>

  <div class="little-image">

    <div
      cdkDropList
      [cdkDropListData]="littleImages"
      class="example-list"
      (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let item of littleImages" cdkDrag>{{item}}</div>
    </div>
  </div>
</div>

并且在.ts中>

  littleImages = [
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ];

  mainImages = [
  ];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      this.mainImages = [this.littleImages[event.previousIndex]]
    }
  }