I would like to use cdk drag and drop to reorder a ngFor list, but because I dont want an animation to fire again for each element after drop, I want to also use trackby
Problem is when I use trackby the drag snaps back each time instead of remaining at its indented index position
<ng-container *ngIf="tabObj$ | async as tab">
<div
cdkDropList
[cdkDropListData]="memberList"
[cdkDropListConnectedTo]="bumble"
[cdkDropListDisabled]="isDisabled"
(cdkDropListDropped)="drop($event)"
[id]="tabid"
[style]="template.style">
<div class="indication" (click)="handleInfoClick(tab)">{{ALTtabid}} -- {{tabid}}</div>
<sss-node
*ngFor="let pointerobj of memberList; let i = index; trackBy: identify;"
cdkDrag
[cdkDragData]="pointerobj"
class="cdk-drag-animating"
[ngClass]="pointerobj._id"
[loading]="pointerobj.loading"
[ancestry]="getAncestry(pointerobj, i)"
[bubbleUp]="handleBubble.bind(this)">
</sss-node>
</div>
</ng-container>
drop(event: CdkDragDrop<string[]>) {
console.log("this.tabid", this.tabid);
console.log("event", event);
this.goforward(event);
console.log("boo");
}
goforward(event:any){
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
// this.memberList.splice(event.currentIndex, 0, this.memberList.splice(event.previousIndex, 1)[0]);
} else {
// transferArrayItem(event.previousContainer.data,
// event.container.data,
// event.previousIndex,event.currentIndex);
}
}
identify = (index, pointer: Pointer) => { return pointer.instance; }