Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

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

Attr Details
ionItemReorder

Emitted when the item is reordered. Emits an object with from and to properties.

Sass Variables

Property Default Description
$item-ios-body-text-font-size 1.7rem

Font size of the item text

$item-ios-paragraph-margin 0 0 2px

Margin of the item paragraph

$item-ios-paragraph-font-size 1.4rem

Font size of the item paragraph

$item-ios-paragraph-text-color #8e9093

Color of the item paragraph

$item-ios-avatar-size 36px

Size of the avatar in the item

$item-ios-thumbnail-size 56px

Size of the thumbnail in the item

$item-ios-detail-push-show true

Shows the detail arrow icon on an item

$item-ios-detail-push-color $list-ios-border-color

Color of the detail arrow icon

$item-ios-detail-push-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}'/></svg>"

Icon for the detail arrow

$item-ios-divider-background #f7f7f7

Background for the divider

$item-ios-divider-color #222

Color for the divider

$item-ios-divider-padding 5px 15px

Padding for the divider

$item-ios-sliding-content-background $list-ios-background-color

Background for the sliding content

Property Default Description
$item-md-body-text-font-size 1.4rem

Font size of the item text

$item-md-body-text-line-height 1.5

line height of the item text

$item-md-paragraph-text-color #666

Color of the item paragraph

$item-md-font-size 1.6rem

Font size of the item

$item-md-avatar-size 40px

Size of the avatar in the item

$item-md-thumbnail-size 80px

Size of the thumbnail in the item

$item-md-detail-push-show false

Shows the detail arrow icon on an item

$item-md-detail-push-color $list-md-border-color

Color of the detail arrow icon

$item-md-detail-push-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-md-detail-push-color}'/></svg>"

Icon for the detail arrow

$item-md-divider-color #858585

Color for the divider

$item-md-divider-background #fff

Background for the divider

$item-md-divider-font-size $item-md-body-text-font-size

Font size for the divider

$item-md-divider-border-bottom 1px solid $list-md-border-color

Border bottom for the divider

$item-md-divider-padding 5px 15px

Padding for the divider

$item-md-sliding-content-background $list-md-background-color

Background for the sliding content

Property Default Description
$item-wp-body-text-font-size 1.4rem

Font size of the item text

$item-wp-body-text-line-height 1.5

line height of the item text

$item-wp-body-background-color $list-wp-background-color

Background color of the item

$item-wp-body-text-color $list-wp-text-color

Color of the item text

$item-wp-paragraph-text-color #666

Color of the item paragraph

$item-wp-font-size 1.6rem

Font size of the item

$item-wp-avatar-size 40px

Size of the avatar in the item

$item-wp-thumbnail-size 80px

Size of the thumbnail in the item

$item-wp-detail-push-show false

Shows the detail arrow icon on an item

$item-wp-detail-push-color $input-wp-border-color

Color of the detail arrow icon

$item-wp-detail-push-svg "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-wp-detail-push-color}'/></svg>"

Icon for the detail arrow

$item-wp-divider-color $list-wp-text-color

Color for the divider

$item-wp-divider-background #fff

Background for the divider

$item-wp-divider-border-bottom 1px solid $list-wp-border-color

Bodrer bottom for the divider

$item-wp-divider-font-size 2rem

Font size for the divider

$item-wp-divider-padding 5px 15px

Padding for the divider

$item-wp-sliding-content-background $list-wp-background-color

Background for the sliding content

Related

List Component Docs, List API Docs, Item API Docs

API

Native

General