Drag and Drop list ordering issue

[regocziTamas]

What is the expected behavior?

I am trying to reproduce the simple drag and drop list ordering example from here: https://material.angular.io/cdk/drag-drop/overview

What is the current behavior?

However, the dragged item always snaps back to its original place. The ordering animation is showing. The event shows that the previous and the current index are always 0.
https://i.imgur.com/1RkV6MT.gifv
https://i.imgur.com/k4wMbt3.gifv

What are the steps to reproduce?

The drop listener and the test data:

strings = ["dsfs","fgjdf","ghama","jéép"];
drop(event: CdkDragDrop<String[]>) {
    console.log(event);
    moveItemInArray(this.strings, event.previousIndex, event.currentIndex);
}

The HTML:

<div cdkDropList *ngFor="let string of strings" [cdkDropListData]="strings" (cdkDropListDropped)="drop($event)">
    <mat-card cdkDrag [cdkDragData]="string">{{string}}</mat-card>
</div>

The CSS is copy-paste from the tutorial

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 6.2.1
Material: 7.2.1
OS: Ubuntu 16.04
TypeScript: 3.2.2
Chrome: 65.0.3325.146

[andreElrico]

have you tried wrapping the mat-card into a <div> that has all the directives?

[Flashunt]

I think you need this. Its work fine, for me. You can get the array, from the event object.
drop(event: any): void { if (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } else { transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); } }

[techy2493]

To use a CDKDropDropList you must implement the cdkDropListDropped event and re-arrange the array you provide the values from yourself so that they re re-ordered on the DOM.

@Flashunt has provided a great example of the simplest way to do this, using the provided moveItemInArray method (which must be imported from the material library).

However if you other requirements you can use any method you wish to re-order the entities you provide as cdk elements. The CdkDragDrop event object has current and previous indexes for you to use.

[furier]

I am having same or similar issues, were the indexes seem to not always be correct.

const dropListRef = this.dragDrop
  .createDropList(this.formlyForm.nativeElement)
  .withItems(Array.from(this.formlyForm.nativeElement.querySelectorAll('formly-field')).map((field: HTMLElement) => {
    return this.dragDrop.createDrag(field);
  }));
dropListRef.lockAxis = 'y';
dropListRef.dropped.subscribe(({ previousIndex, currentIndex }) => {
  // BUG: previousIndex, currentIndex are not always updated and often the same number so nothing happens...
  console.log(`previousIndex: ${previousIndex}, currentIndex: ${currentIndex}`);
  moveItemInArray(this.fields, previousIndex, currentIndex);
});

[furier]

Any updates on this? This is a very annoying issue where the prev and current index is most of the time the same number regardless of which item i drag and where i drop it.

[andreElrico]

I think the fastest way to get help is posting an stackblitz that repoduces your error.

[zverbeta]

so, i did reproduce this bug when i have custom style, but working fine if i copy paste styles from example.

Probably the problem in flexbox

[furier]

Yeah I am using flexbox, did you reproduce at stackblitz?

[IlCallo]

Same here, list re-ordering works fine when elements have display:block, doesn't work when have display:flex

[furier]

reproduction: https://stackblitz.com/edit/angular-material-ngx-formly-drag-and-drop

[jrybinski]

I have very similar problem. I'm usingBehaviorSubject as DataSource.
After first reorder it keeps old index.
Reproduction here:
https://stackblitz.com/edit/angular-3ajhey
Any ideas why and how to fix it?

I find out if I reset first our dataSource and then emit new value then it works fine. Still don't know why.

this.dataSource.next(null);
this.dataSource.next(currentValue);

https://stackblitz.com/edit/angular-ggzjeh

[furier]

It seems to be a css issue, dont know exactly what css causes the behavior but a colleague played around with the css and the issues went away, just FYI...

[maranmaran]

So any workaround for this when using flex version of mat-table ?