ion-reorder-group
The reorder group is a wrapper component for items using the
ion-reorder
component. See 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';
@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: any) {
// 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';
@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: any) {
// 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);
}
}
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
<ion-reorder-group 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>
const reorderGroup = document.querySelector('ion-reorder-group');
reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', detail.from, 'to', 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
detail.complete();
});
Updating Data
const items = [1, 2, 3, 4, 5];
const reorderGroup = document.querySelector('ion-reorder-group');
reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', 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
items = detail.complete(items);
// After complete is called the items will be in the new order
console.log('After complete', items);
});
import React from 'react';
import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon, IonContent } from '@ionic/react';
import { ItemReorderEventDetail } from '@ionic/core';
function doReorder(event: 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', event.detail.from, 'to', event.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
event.detail.complete();
}
export const ReorderGroupExample: React.FC = () => (
<IonContent>
{/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
<IonReorderGroup disabled={false} onIonItemReorder={doReorder}>
{/*-- Default reorder icon, end aligned items --*/}
<IonItem>
<IonLabel>Item 1</IonLabel>
<IonReorder slot="end" />
</IonItem>
<IonItem>
<IonLabel>Item 2</IonLabel>
<IonReorder slot="end" />
</IonItem>
{/*-- Default reorder icon, start aligned items --*/}
<IonItem>
<IonReorder slot="start" />
<IonLabel>Item 3</IonLabel>
</IonItem>
<IonItem>
<IonReorder slot="start" />
<IonLabel>Item 4</IonLabel>
</IonItem>
{/*-- Custom reorder icon end items --*/}
<IonItem>
<IonLabel>Item 5</IonLabel>
<IonReorder slot="end">
<IonIcon name="pizza" />
</IonReorder>
</IonItem>
<IonItem>
<IonLabel>Item 6</IonLabel>
<IonReorder slot="end">
<IonIcon name="pizza" />
</IonReorder>
</IonItem>
{/*-- Items wrapped in a reorder, entire item can be dragged --*/}
<IonReorder>
<IonItem>
<IonLabel>Item 7</IonLabel>
</IonItem>
</IonReorder>
<IonReorder>
<IonItem>
<IonLabel>Item 8</IonLabel>
</IonItem>
</IonReorder>
</IonReorderGroup>
</IonContent>
);
Updating Data
const items = [1, 2, 3, 4, 5];
function doReorder(event: CustomEvent) {
// 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 = event.detail.complete(this.items);
// After complete is called the items will be in the new order
console.log('After complete', this.items);
}
<template>
<!-- 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>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Example extends Vue {
doReorder(event) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.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
event.detail.complete();
}
}
</script>
Updating Data
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Example extends Vue {
items = [1, 2, 3, 4, 5];
doReorder(event) {
// 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 = event.detail.complete(this.items);
// After complete is called the items will be in the new order
console.log('After complete', this.items);
}
}
</script>
Properties
disabled | |
---|---|
Description | If
|
Attribute | disabled |
Type | boolean |
Default | true |
Events
Name | Description |
---|---|
ionItemReorder | Event 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 | |
---|---|
Description | Completes the reorder operation. Must be called by the 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
|
Signature | complete(listOrReorder?: boolean | any[] | undefined) => Promise<any> |