Ionic Reorder

The Ionic provides a <ion-reorder> component for reordering feature. It allows you to drag and drop the list items, which changes the order of the list elements. The <ion-reorder> component needs to be used with the <ion-reorder-group> to provide a visual drag and drop interface. The <ion-reorder-group> acts as a wrapper for the list elements inside <ion-reorder>.

Once the user drags and drops a list of items to a new position, the ionItemReorder event is dispatched. The corresponding handler should be implemented, which calls the complete() method. The ionItemReorder event contains several properties that include all relevant information about the reorder information. This information includes from an index to new indexes.

This feature is essential in many places like Song Ques, Todo list items, etc. Let us understand how the reorder component work with the following example.

Example

In this example, we are going to discuss how we can implement a reorder component to allow items to be drag and drop to a new position. Here, we are also going to update the list items by calling the complete() method.

Home.page.html

The HTML page contains the lists items inside the <ion-reorder-group> components, which have an iteration of items array using angular *ngFor directive. In the <ion-reorder-group>, we have set the disabled property false, which enables the drag and drop feature. The ionItemReorder is an event which enables to complete the reordering of the items.

<ion-header translucent>
  <ion-toolbar>
    <ion-title>Ionic Reorder</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <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 List</ion-button>
  </ion-list>
</ion-content>

Home.page.ts

This page contains the implementation of the onRenderItems($event). It contains the from and to index of the item dragged. Then, it uses a splice() method, which removes the dragged item from an array and assigns it to the variable draggedItem. After 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 = [
      'Roberts',
      'Peter',
      'Tiffany Waugh',
      'Sheila Bauch',
      'Diana Gerhold',
      'John Kuhn'
    ];
  }

  onRenderItems(event) {
    console.log(`Moving 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);
    // this.listItems = reorderArray(this.listItems, event.detail.from, event.detail.to);
    event.detail.complete();
  }

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

Output:

When you execute the app, it will give the following output.

Next, drag any item from the list and drop it to a new position. For example, we have drag the Robert item and dropped it to the fourth position as like below image. You will also get a message in the console that moving items from 0 to 3.