cdkDropList doesn't save new order of items

Question

I have a super simple drop list in my angular project:

<ul cdkDropList style="padding: 20px;">
    <li cdkDrag>111111</li>
    <li cdkDrag>222222</li>
    <li cdkDrag>333333</li>
    <li cdkDrag>444444</li>
    <li cdkDrag>555555</li>
</ul>

However, when I drag 111111 to the end, it jumps back to being first in the list.

Here's a video demo of the problem.
Here's a re-creation of my problem on StackBlitz.

@Trevor https://stackblitz.com/edit/angular-eiz5su?file=app/cdk-drag-drop-sorting-example.html — AskYous, Mar 04 '19 at 17:50

score 3 · Accepted Answer · answered Mar 04 '19 at 17:45

You are missing a data source.

After Dragging, you must update that data source to reflect your UI.

It is jumping back to your real modal state.

Example:

HTML:

<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

TS file:

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
...
export class SortListComponent implements OnInit {
  customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }
}

Notice my customers is my data source. And I am updating it after drop

I can't just hard-code my list items? It must have a data model? — AskYous, Mar 04 '19 at 17:51
If you would like to change position, yes. The template does not have a state it can update. It's only a view — MCMatan, Mar 04 '19 at 17:55

cdkDropList doesn't save new order of items

1 Answers1