Angular 7拖放拖放交换元素 [英] Angular 7 drag Drop swapping elements
本文介绍了Angular 7拖放拖放交换元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用新的Angular 7 CDK拖放来移动元素列表.但是没有找到交换元素的任何选择,大多数情况下,给出的所有示例都是对元素进行排序的.
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);
}
}
例如:如果元素0的拖动操作已开始并拖放到元素4,则在这种情况下,元素0 dom应替换为元素4,反之亦然.
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;
}
这篇关于Angular 7拖放拖放交换元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文