ionic 4: <ion-reorder> not working as expected - ionic-framework

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

Answer 1

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();
}

Answer 2

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">

Answer 3

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.

Answer 4

<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);
}

Answer 5

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.