[英]Angular material drag drop cdk: Combining items into one and swapping the elements
[英]Angular 7 drag Drop swapping elements
我正在尝试使用新的 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,反之亦然。
您可以简单地手动交换项目:
drop(event: CdkDragDrop<string[]>) {
let oldtarget = this.movies[event.previousIndex];
this.movies[event.previousIndex] = this.movies[event.currentIndex];
this.movies[event.currentIndex] = oldtarget;
}
请参阅此工作演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.