Angular 7拖放交换元素答案

【问题标题】：Angular 7 drag Drop swapping elementsAngular 7拖放交换元素
【发布时间】：2019-11-02 07:33:46
【问题描述】：

我正在尝试使用新的 Angular 7 CDK 拖放来移动元素列表。但没有找到任何交换元素的选项，大多数给出的示例都是用于排序元素。

https://stackblitz.com/angular/pxgqrvaqbxeg?file=app%2Fcdk-drag-drop-sorting-example.ts

cdk-drag-drop-sorting-example.htm

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>

cdk-drag-drop-sorting-example.ts

import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';

/**
 * @title Drag&Drop sorting
 */
@Component({
  selector: 'cdk-drag-drop-sorting-example',
  templateUrl: 'cdk-drag-drop-sorting-example.html',
  styleUrls: ['cdk-drag-drop-sorting-example.css'],
})
export class CdkDragDropSortingExample {
  movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi'
  ];

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

例如：如果元素 0 的拖动被启动并放置在元素 4 处，在这种情况下，元素 0 的 dom 应该被替换为元素 4，反之亦然。

【问题讨论】：

标签： angular drag-and-drop angular-material

【解决方案1】：

您可以简单地手动交换项目：

drop(event: CdkDragDrop<string[]>) {
    let oldtarget = this.movies[event.previousIndex];
    this.movies[event.previousIndex] = this.movies[event.currentIndex];
    this.movies[event.currentIndex] = oldtarget;
}

Stackblitz example

【讨论】：

你的堆栈闪电战它没有交换物品。它的重新排序。

【解决方案2】：

我不知道您是否真的检查过 Angular Material 文档，但请看：

Angular docs (with a lot of sorting examples)

希望对您有所帮助；）

【讨论】：

是的，但我正在寻找交换或替换不排序的元素

【解决方案3】：

请看这个工作demo。

【讨论】：