Ionic 5 Ion Reorder & Sorting List using ion-reorder UI Component

In this Ionic 5/4 tutorial, we’ll discuss how to add a Sortable list with Drag and Drop feature using the Ion Reorder UI component in Ionic Angular application.

An IonReorder component adds Drag and Drop feature to list items using which user can change the order of items. We can apply such sorting or reorder functionality in the real-world applications having a queue of song playlist, the priority of todo items, etc.

The sortable list is implemented by adding the ion-reorder & ion-reorder-group UI components on a list of items. We can enable or disable this feature, customize the handle icons on the sortable list.

Using Ion Reorder we can add an awesome visual list drag and drop interface adding more ease in user interaction with the app.

Here we will create an example Ionic application using Angular framework, then Implement Ion Reorder component allowing items to be drag and drop to change the order in the list.

Adding Sortable List

We’ll create a list using the ion-list and having a dynamic list of ion-item iterating over the collection listItems using *ngFor directive. To make these items in the list we need to wrap them in the ion-reorder-group component.

Each item is also having the ion-reorder component which creates a handle on each item to drag item.

The IonReorderGroup component is having (ionItemReorder) event handler. It is triggered when an item is sorted by a user. The disabled property can be set to true or false to enable or disable the sorting feature on the list.

  <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 text-center>
    <ion-button (click)="getList()">
      Get Updated List
    </ion-button>
  </ion-list>

Update Class Component

Now we will add methods getList() to console Item lists and onRenderItems($event) to sort the actual listItems array by getting from and to the index of item dragged.

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 = [
      "1. Aylin Roberts",
      "2. Autumn Kuhic",
      "3. Tiffany Windler",
      "4. Sheila Bauch",
      "5. Diana Gerhold",
      "6. Arielle Kuhn"
    ];
  }

  onRenderItems(event) {
    console.log(`Moving item from ${event.detail.from} to ${event.detail.to}`);
     let draggedItem = this.listItems.splice(event.detail.from,1)[0];
     this.listItems.splice(event.detail.to,0,draggedItem)
    //this.listItems = reorderArray(this.listItems, event.detail.from, event.detail.to);
    event.detail.complete();
  }

  getList() {
    console.table(this.listItems);
  }
}

Position of Handle Icon

In the ion-reorder component we can set the slot property with start or end to position the icon

<ion-reorder slot="start"></ion-reorder>

<ion-reorder slot="end"></ion-reorder>

Custom Handle Icon

The ion-reorder can have the ion-icon to add a custom icon as a handle

<ion-reorder slot="end">
          <ion-icon name="hammer"></ion-icon>
        </ion-reorder>

That’s it your sortable item list is ready to rock. You can follow these simple steps to create an awesome Ionic Reorder list.

Category: Ionic Framework