Ionic Reorder

The Ionic offers the <ion-reorder> component to reordering features. Ionic reorder component adds the Drag and Drop feature to list items, in which the user can change the order of the items. Reorder can be used within the <ion-list> and <ion-item-group> to offer a visual drag and drop interface in the item list. The <ion-reader> is the anchor component used to drag and drop the items within the <ion-reorder-group> component.

When the user drags and drops the list of the items to the new position, then the ionItemReorder event is dispatched. The handler for the ion-reorder should be implemented, which calls the complete() method. The ionItemReorder event contains a different property that includes all the valid information about the reorder operation. It consists of the form and to indexes. In the case of reordering, the item moves from an index to a new index.

There are many functionalities of such sorting or reorder found in many places such as Song Ques, Todo list items, etc.

Example: This example explains how you can use the reorder component in the ionic application. It allows the user to drag and drop the items to a new position. Here, you are going to update the list items by calling the complete() method.

Home.page.html

This file contains the list items inside the <ion-reorder-group> component, which have an iteration of items array using angular *ngFor directive. In the <Ion-reorder-group> component, you have to set the disabled property at false, which enables the drag and drop feature in the ionic application. The ionItemReorder is that event, which enables them to complete the reordering of the items.

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Reorder Example</ion-title>  
   </ion-toolbar>  
 </ion-header>
 <ion-content class="ion-padding" color="light">  
   <ion-list>   
     <ion-reorder-group (ionItemReorder)="onRenderItems($event)" disabled="false">  
       <ion-item *ngFor="let item of listItems">  
         <ion-label>  
           {{item}}  
         </ion-label>  
         <ion-reorder></ion-reorder>  
       </ion-item>  
     </ion-reorder-group>  
   </ion-list>  
   <ion-list class="ion-text-center">  
     <ion-button (click)="getList()">Get Updated new List</ion-button>  
   </ion-list>  
 </ion-content>   

Home.page.ts

This file contains the implementation of the onRenderItems($event). It contains the index list from to the item dragged. By using the splice() method, you can remove and drag the item from top to bottom and bottom to up an array and assigns it to the variable draggedItem. Also that, it calls the complete() method to complete the reorder operation.

import { Component } from
'@angular/core';    
 @Component({  
   selector: 'app-home',  
   templateUrl: 'home.page.html',  
   styleUrls: ['home.page.scss'],  
 })  
 export class HomePage {  
   listItems: any;  
   constructor() {  
     this.listItems = [  
       'Java',   
       'Python',  
       'Node.js',  
       'Android',  
       'React.js',  
       'HTML',
       'PHP', 
       'C++'  
     ];  
   } 
   onRenderItems(event) {  
     console.log(`Move item from ${event.detail.from} to ${event.detail.to}`);   
     const draggedItem = this.listItems.splice(event.detail.from, 1)[0];  
     this.listItems.splice(event.detail.to, 0, draggedItem);   
     event.detail.complete();  
   }  
   getList() {  
     console.table(this.listItems);   
   }  
 }   

Output: After executing this code, you will get the output, as shown below:

When you dragged any item from the list and dropped it to the new position, which is shown below: