List re-ordering
Easily create lists with drag-and-drop functionality to reorders items
Ionic has long awaited a standard drag-n-drop functionality for list items.
ion-reorder
is Ionic's standard tag to include in an ion-item
to make it draggable to reorder. This ion-item
should be contained within an ion-reorder-group
to function properly.<ion-item>
<ion-label>
Item
</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
In Full App, list re-ordering in located in
src/app/pages/addons/reorder
Following is the sample code for a re-order enabled, drag-n-drop capable item list
<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
<ion-item *ngFor="let item of items">
<ion-label>Item {{ item }}</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
(ionItemReorder)="reorderItems($event)"
is the declaration of ionItemReorder
listener attached to the reorder group. When this listener is fired, you can call a function like reorderItems
which contains the logic of reordering. reorderItems(ev) {
const element = this.items[ev.detail.from];
this.items.splice(ev.detail.from, 1);
this.items.splice(ev.detail.to, 0, element);
ev.detail.complete();
}
ev.detail.complete();
, where ev
is the drop event, marks the completion of your reorder logic, and at this moment, you will display the modified list to the user.In the above example, we used a default drag-handle.
We can use a custom drag-handle icons by defining the content inside
ion-reorder
tag<ion-reorder slot="start">
<ion-icon name="nuclear"></ion-icon>
</ion-reorder>
We can also make the whole
ion-item
draggable, by containing it inside the ion-reorder
tag, like so<ion-reorder *ngFor="let item of items3">
<ion-item >
<ion-label>Item {{ item }}</ion-label>
</ion-item>
</ion-reorder>

Different drag handles
Last modified 3yr ago