List Re-ordering

Easily create lists with drag-and-drop functionality to reorders items

Ionic has long awaited a standard drag-n-drop functionality for list items. ion-reorder is Ionic's standard tag to include in an ion-item to make it draggable to reorder. This ion-item should be contained within an ion-reorder-group to function properly.

<ion-item>
  <ion-label>
    Item
  </ion-label>
  <ion-reorder slot="end"></ion-reorder>
</ion-item>

In Full App, list re-ordering in located in src/app/pages/addons/reorder

Following is the sample code for a re-order enabled, drag-n-drop capable item list

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

Completion event

(ionItemReorder)="reorderItems($event)" is the declaration of ionItemReorderlistener attached to the reorder group. When this listener is fired, you can call a function like reorderItemswhich contains the logic of reordering.

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

ev.detail.complete(); , where ev is the drop event, marks the completion of your reorder logic, and at this moment, you will display the modified list to the user.

Custom Drag Handles

In the above example, we used a default drag-handle.

We can use a custom drag-handle icons by defining the content inside ion-reorder tag

<ion-reorder slot="start">
   <ion-icon name="nuclear"></ion-icon>
</ion-reorder>

We can also make the whole ion-item draggable, by containing it inside the ion-reorder tag, like so

<ion-reorder *ngFor="let item of items3">
  <ion-item >
    <ion-label>Item {{ item }}</ion-label>
  </ion-item>
</ion-reorder>