Angular 7 拖放交换元素 [英] Angular 7 drag Drop swapping elements

问题描述

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

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

cdk-drag-drop-sorting-example.htm

<div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>

cdk-drag-drop-sorting-example.ts

import {Component} from '@angular/core';从@angular/cdk/drag-drop"导入 {CdkDragDrop, moveItemInArray}；/*** @title 拖放排序*/@成分({选择器:'cdk-drag-drop-sorting-example'，templateUrl: 'cdk-drag-drop-sorting-example.html',styleUrls: ['cdk-drag-drop-sorting-example.css'],})导出类 CdkDragDropSortingExample {电影 = ['第一集 - 幽灵的威胁'，'第二集 - 克隆人的进攻'，'第三集 - 西斯的复仇'，'第四集 - 一个新的希望'，'第五集 - 帝国反击'，'第六集 - 绝地归来'，'第七集 - 原力觉醒'，第八集——最后的绝地武士"];drop(事件:CdkDragDrop){moveItemInArray(this.movi​​es, event.previousIndex, event.currentIndex);}}

例如:如果对元素 0 的拖动开始并放置在元素 4 处，则在这种情况下，元素 0 dom 应替换为元素 4，反之亦然.

解决方案

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

drop(event: CdkDragDrop) {让 oldtarget = this.movi​​es[event.previousIndex];this.movi​​es[event.previousIndex] = this.movi​​es[event.currentIndex];this.movi​​es[event.currentIndex] = oldtarget;}

Stackblitz 示例

I'm trying to use the new Angular 7 CDK Drag and drop to move a list of elements. But didnt found any option to swap element mostly all the example given are for sorting elements.

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

For eg: If drag for element 0 is initiated and dropped at element 4, in that case element 0 dom should be replaced with element 4 and vice versa.

解决方案

You can simply swap the item manually:

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

这篇关于Angular 7 拖放交换元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！