I was trying the drag and drop of Angular material where I made the array as array of JSON.
The problem is I want to update the pos
key (of the JSON) with the value of event.currentIndex
and modify the pos of other values also.
component.ts
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
temp: number;
movies = [
{name: 'Episode I - The Phantom Menace', pos: 0},
{name:'Episode II - Attack of the Clones', pos: 1},
{name: 'Episode III - Revenge of the Sith', pos: 2},
{name: 'Episode IV - A New Hope', pos: 3}
];
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
console.log(this.movies[event.currentIndex]);
console.log(this.movies);
this.temp = event.previousIndex;
event.previousIndex = event.currentIndex;
event.currentIndex = this.temp;
this.movies[event.currentIndex].pos = event.currentIndex;
this.movies[event.previousIndex].pos = event.previousIndex;
}
component.html
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let movie of movies;" cdkDrag>
{{movie.name}} {{movie.pos}}
</div>
</div>
初始清单
交换之后
当我尝试拖动第一个或最后一个值时,就会出现这种情况。
我需要对代码进行哪些更改?