ItemReorder

ion-list[reorder],ion-item-group[reorder]

Improve this doc

Item reorder adds the ability to change an item's order in a group. It can be used within an ion-list or ion-item-group to provide a visual drag and drop interface.

Grouping Items

All reorderable items must be grouped in the same element. If an item should not be reordered, it shouldn't be included in this group. For example, the following code works because the items are grouped in the <ion-list>:

<ion-list reorder="true">
  <ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>

However, the below list includes a header that shouldn't be reordered:

<ion-list reorder="true">
  <ion-list-header>Header</ion-list-header>
  <ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>

In order to mix different sets of items, ion-item-group should be used to group the reorderable items:

<ion-list>
  <ion-list-header>Header</ion-list-header>
  <ion-item-group reorder="true">
    <ion-item *ngFor="let item of items">{{ item }}</ion-item>
  </ion-item-group>
</ion-list>

It's important to note that in this example, the [reorder] directive is applied to the <ion-item-group> instead of the <ion-list>. This way makes it possible to mix items that should and shouldn't be reordered.

Implementing the Reorder Function

When the item is dragged and dropped into the new position, the (ionItemReorder) event is emitted. This event provides the initial index (from) and the new index (to) of the reordered item. For example, if the first item is dragged to the fifth position, the event will emit {from: 0, to: 4}. Note that the index starts at zero.

A function should be called when the event is emitted that handles the reordering of the items. See usage below for some examples.

Usage

<ion-list>
  <ion-list-header>Header</ion-list-header>
  <ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">
    <ion-item *ngFor="let item of items">{{ item }}</ion-item>
  </ion-item-group>
</ion-list>

class MyComponent {
  items = [];

  constructor() {
    for (let x = 0; x < 5; x++) {
      this.items.push(x);
    }
  }

  reorderItems(indexes) {
    let element = this.items[indexes.from];
    this.items.splice(indexes.from, 1);
    this.items.splice(indexes.to, 0, element);
  }
}

Ionic also provides a helper function called reorderArray to reorder the array of items. This can be used instead:

import { reorderArray } from 'ionic-angular';

class MyComponent {
  items = [];

  constructor() {
    for (let x = 0; x < 5; x++) {
      this.items.push(x);
    }
  }

  reorderItems(indexes) {
    this.items = reorderArray(this.items, indexes);
  }
}

Alternatevely you can execute helper function inside template:

<ion-list>
  <ion-list-header>Header</ion-list-header>
  <ion-item-group reorder="true" (ionItemReorder)="$event.applyTo(items)">
    <ion-item *ngFor="let item of items">{{ item }}</ion-item>
  </ion-item-group>
</ion-list>

Output Events

Sass Variables

Related

List Component Docs, List API Docs, Item API Docs