Drag&Drop / reorder in list does not work

Ionic Framework
1

I have a list where it should be possible to change the order of the entries (text) using drag and drop (ion-reorder). Unfortunately it does not work or at least nothing happens. I don’t get any error messages and compilation works without any problems.

liste.page.html

    </div>

        
        <ion-list>
          <ion-reorder-group (ionItemReorder)="reorderItems($event)">
            <ion-item-sliding *ngFor="let item of TodoListe; let i = index" [id]="'item-' + i">
              <ion-item>
                <ion-label>{{item}}</ion-label>
                <ion-reorder slot="end"></ion-reorder> 
              </ion-item>

          <ion-item-options side="end">

liste.page.ts
…
reorderItems(ev: any) {
const element = this.TodoListe[ev.detail.from];
this.TodoListe.splice(ev.detail.from, 1);
this.TodoListe.splice(ev.detail.to, 0, element);
ev.detail.complete();
}
…

liste.page.scss
…
.my-list-item.ion-reorder {
background-color: #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
…

What am I missing here? Who can help me with this or suggest what is going wrong?

2

First, you are missing proper code blocks so we can easily read your code :grin:

Since you are manipulating the array yourself, I think you want to pass the complete method your array.

ev.detail.complete(this.TodoListe);
1 Like
3

Thanks, I’ve changed both - I’m just a real newbie :wink: I have also adapted the code, but unfortunately the problem persists.

4

Whoops, I made a mistake in my thinking.

The method complete says:

If a list of items is passed, the list will be reordered and returned in the proper order. (source)

So, try this:

reorderItems(ev: any) {
    this.TodoListe = ev.detail.complete(this.TodoListe);
}

If that still doesn’t work, please provide a minimal reproduction of the the issue in a StackBlitz or repo.

5

It is still the same - no possibility to move the items with drag&drop.
Therefore following the code in github.

6

A fully functioning repo in the future would be helpful where we can clone and run right away.

Here is a StackBlitz with a working example somewhat similar to what you are trying to do.

1 Like
7

Absolutely brilliant. I have implemented it and it works! Many thanks for the quick and competent help - and of course the other tips too :+1:t3: :smiley:

1 Like