ionic 4: not working as expected

Question

i'm working with ionic 4 angular 7. I'm using <ion-reorder> to reorder list. Drag n Drop works for the first time fine but when I release the click, item got stuck. After first reorder everything freezes. And I'm unable to attempt reorder for the second time.

Here my .html file

<ion-list lines="none">
      <ion-reorder-group disabled="false">
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
      </ion-reorder-group>
    </ion-list>

When I drag n Drop Item. It get stuck when I drop it. After this, everything freezes.

Any Help...?

I'm using

Ionic: 4.10.2 Angular: 7.3.0

Sorry @PeterHaddad the link seems to be broken. – pungggi Sep 27 '20 at 20:48 — pungggi, Sep 27 '20 at 20:48

score 29 · Accepted Answer · answered Feb 07 '19 at 07:27

29

I think you need to store your data in a variable and ngFor on these data to build your reorder items.

this.items: Array<img: string; title: string; description: string; icon: 
string> = [yourArrayOfObjects];

I think then you need to catch the ionItemReorder event like this

<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">

and in your .ts the reorderItems() function could be

reorderItems(ev) {
    const itemMove = this.items.splice(ev.detail.from, 1)[0];
    this.items.splice(ev.detail.to, 0, itemMove);
    ev.detail.complete();
}

answered Feb 07 '19 at 07:27

ppichier

1,108
1
16
21

1

Thanks. This worked for me. Although as per ionic documentation, this should work with one statement: this.items = ev.detail.complete(this.items); but it's not working. – Jagdish Chopde Jul 16 '20 at 14:58
1

You can add type context to the event in typescript: `import { ItemReorderEventDetail } from '@ionic/core';` `reorderItems(ev: CustomEvent);` – nelson6e65 Sep 23 '20 at 19:18
I was missing the 'complete' call. Thanks – Ifelere Bolaji May 03 '21 at 16:51
I added a (click) event instead of (ionItemReorder) event. Thanks – Mayank Kataria Feb 15 '22 at 11:05

score 4 · Answer 2 · edited Feb 14 '20 at 11:24

4

The key here is to complete the event and you have to do it manually. So the ionItemReorder event callback is a must. So something as simple as this should do the trick:

Typescript :

    public onItemReorder({ detail }) {
       detail.complete(true);
    }

HTML :

<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="false">

edited Feb 14 '20 at 11:24

Antoine Thiry

2,362
4
28
42

answered Feb 14 '20 at 08:51

Alexander

41
1

score 1 · Answer 3 · answered Apr 03 '19 at 05:03

ionic4 version:

html code:

<ion-content>
  <ion-list>
        <ion-list-header>
            <ion-label>INCLUDE</ion-label>
        </ion-list-header>
        <ion-reorder-group (ionItemReorder)="reorder($event)" [disabled]="false">
            <ion-item *ngFor="let accessory of accessories">
                <ion-label>{{accessory}}</ion-label>
                <ion-reorder></ion-reorder>
            </ion-item>
        </ion-reorder-group>
   </ion-list>
</ion-content>

typescript code:

accessories = ['test', 'test1', 'test2'];

reorder(event) {
        const itemToMove = this.accessories.splice(event.detail.from, 1)[0];
        this.accessories.splice(event.detail.to, 0, itemToMove);
}

This will never throw any type of error, it works. I am 100% sure, have used 3-4 times. I hope, this will also help you.

this required the ```event.accessories.complete();``` after the final splice — Captain Fantastic, Apr 16 '19 at 17:05

score 1 · Answer 4 · answered Aug 16 '19 at 07:09

  <ion-list >
              <ion-item-group (ionItemReorder)="reorder($event)"  reorder='true' >
                <ion-item *ngFor="let item of file_uri" (click)="openSubMenu(item.bunch)" style="background-color: #F0F0F0">
                <ion-avatar item-left >
                  <img src="assets/{{item.bunch}}.svg">
                </ion-avatar>  

                  <h2 color="primary_secound">{{item.bunch}}
                  </h2>
                  <p>Click To See Menu of {{item.bunch}} 
                  </p>

                  <ion-icon name="arrow-dropright" item-right></ion-icon>

                </ion-item>
              </ion-item-group>
              </ion-list> 
reorder(event) {
        const itemToMove = this.file_uri.splice(event.from, 1)[0];
        this.file_uri.splice(event.to, 0, itemToMove);
    }

Try to add some description about your answer. It will help others to easily catch your code. — Angel F Syrus, Aug 16 '19 at 07:28

score 0 · Answer 5 · answered Oct 20 '21 at 14:48

With Angular - Ionic - Typescript

in HTML file/Code:

<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
    <ion-item *ngFor="let item of yourArray">
         <ion-label> {{ item.name }} </ion-label>
         <ion-reorder slot="end"></ion-reorder>
    </ion-item>
</ion-reorder-group>

Controller or .ts Code:

  reorderItems(ev): void {
    const itemMove = this.yourArray.splice(ev.detail.from, 1)[0];
    this.yourArray.splice(ev.detail.to, 0, itemMove);
    ev.detail.complete();
  }

As per the above example, If you did not add reorderItems() in your controller it will not work. you can change function name as you like.

ionic 4: not working as expected

5 Answers5