Skip to main content
Version: v5

ion-reorder-group

The reorder group is a wrapper component for items using the ion-reorder component. See the Reorder documentation for further information about the anchor component that is used to drag items within the ion-reorder-group.

Once the user drags an item and drops it in a new position, the ionItemReorder event is dispatched. A handler for it should be implemented that calls the complete() method.

The detail property of the ionItemReorder event includes all of the relevant information about the reorder operation, including the from and to indexes. In the context of reordering, an item moves from an index to a new index.

Usage

<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
<ion-reorder-group (ionItemReorder)="doReorder($event)" disabled="false">
<!-- Default reorder icon, end aligned items -->
<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>

<!-- Default reorder icon, start aligned items -->
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label> Item 3 </ion-label>
</ion-item>

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

<!-- Custom reorder icon end items -->
<ion-item>
<ion-label> Item 5 </ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>

<ion-item>
<ion-label> Item 6 </ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>

<!-- Items wrapped in a reorder, entire item can be dragged -->
<ion-reorder>
<ion-item>
<ion-label> Item 7 </ion-label>
</ion-item>
</ion-reorder>

<ion-reorder>
<ion-item>
<ion-label> Item 8 </ion-label>
</ion-item>
</ion-reorder>
</ion-reorder-group>
import { Component, ViewChild } from '@angular/core';
import { IonReorderGroup } from '@ionic/angular';
import { ItemReorderEventDetail } from '@ionic/core';

@Component({
selector: 'reorder-group-example',
templateUrl: 'reorder-group-example.html',
styleUrls: ['./reorder-group-example.css'],
})
export class ReorderGroupExample {
@ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;

constructor() {}

doReorder(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();
}

toggleReorderGroup() {
this.reorderGroup.disabled = !this.reorderGroup.disabled;
}
}

Updating Data

import { Component, ViewChild } from '@angular/core';
import { IonReorderGroup } from '@ionic/angular';
import { ItemReorderEventDetail } from '@ionic/core';

@Component({
selector: 'reorder-group-example',
templateUrl: 'reorder-group-example.html',
styleUrls: ['./reorder-group-example.css'],
})
export class ReorderGroupExample {
items = [1, 2, 3, 4, 5];

@ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;

constructor() {}

doReorder(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);
}
}

Properties

disabled

DescriptionIf true, the reorder will be hidden.
Attributedisabled
Typeboolean
Defaulttrue

Events

NameDescription
ionItemReorderEvent that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the complete() method then needs to be called in order to finalize the reorder action.

Methods

complete

DescriptionCompletes the reorder operation. Must be called by the ionItemReorder event.

If a list of items is passed, the list will be reordered and returned in the proper order.

If no parameters are passed or if true is passed in, the reorder will complete and the item will remain in the position it was dragged to. If false is passed, the reorder will complete and the item will bounce back to its original position.
Signaturecomplete(listOrReorder?: boolean | any[] | undefined) => Promise<any>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.