Skip to main content
Version: v7

ion-reorder

shadow

Reorder is a component that allows an item to be dragged to change its order within a group of items. It must be used within a reorder group to provide a visual drag and drop interface.

The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the ionItemReorder event will be dispatched from the reorder group and the complete method needs to be called.

Basic Usage

The most basic example of a reorder is slotting it inside of an item. By default, the reorder functionality is disabled for a reorder group. It can be enabled by setting the disabled property on the reorder group to false. The reorder icon can then be used to drag and drop the items and reorder them.

import { Component } from '@angular/core';

import { ItemReorderEventDetail } from '@ionic/angular';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
})
export class ExampleComponent {
handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);

// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
// by the reorder group
ev.detail.complete();
}
}

Toggling Reorder

In some cases, it may be desired to have the option to toggle the reorder functionality. This can be done by making the disabled property reactive, based on a function or variable.

import { Component } from '@angular/core';

import { ItemReorderEventDetail } from '@ionic/angular';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
})
export class ExampleComponent {
public isDisabled = true;

handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);

// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
// by the reorder group
ev.detail.complete();
}

toggleReorder() {
this.isDisabled = !this.isDisabled;
}
}

Custom Reorder Icon

The reorder component uses a reorder icon with three lines on iOS and two lines on Material Design. This can be customized by adding an Icon component inside of the reorder with any of the available Ionicons.

import { Component } from '@angular/core';

import { ItemReorderEventDetail } from '@ionic/angular';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
})
export class ExampleComponent {
handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);

// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
// by the reorder group
ev.detail.complete();
}
}

Reorder Wrapper

Reorder can also be used as a wrapper around an item, making the item itself the anchor. Click anywhere on an item below and drag it to reorder the list.

import { Component } from '@angular/core';

import { ItemReorderEventDetail } from '@ionic/angular';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
})
export class ExampleComponent {
handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);

// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
// by the reorder group
ev.detail.complete();
}
}

Updating Data

When the complete method is called on the reorder group with no parameters, the DOM nodes will be reordered. If the items are rendered from an array of data that needs to be sorted, this can result in the data and DOM being out of sync. In order to sort the array upon completion of the reorder, the array should be passed as a parameter to the complete method. The complete method will sort the array and return it so it can be reassigned.

In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, false should be passed as a parameter to the complete method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.

import { Component } from '@angular/core';

import { ItemReorderEventDetail } from '@ionic/angular';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
})
export class ExampleComponent {
items = [1, 2, 3, 4, 5];

handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', this.items);

// Finish the reorder and position the item in the DOM based on
// where the gesture ended. Update the items variable to the
// new order of items
this.items = ev.detail.complete(this.items);

// After complete is called the items will be in the new order
console.log('After complete', this.items);
}
}

Usage with Virtual Scroll

Reorder requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the .ion-content-scroll-host class needs to be added to the element responsible for scrolling.

<ion-content [scrollY]="false">
<div class="ion-content-scroll-host">
<ion-list>
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
<!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
<ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
<ion-item>
<ion-label> Item 1 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>

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

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

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

<ion-item>
<ion-label> Item 5 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
</div>
</ion-content>

Properties

No properties available for this component.

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
iconThe icon of the reorder handle (uses ion-icon).

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.