Angular Drag and Drop with trackby is snapping back

Viewed 308

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; }
1 Answers

pointer.instance is still an object, so the trackBy don't know it was changed.

Try this:

identify = (index, pointer: Pointer) => { return pointer.instance.id; }

Or any other id you have on your instance.

Related