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/reorderFollowing 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 ionItemReorderlistener attached to the reorder group. When this listener is fired, you can call a function like reorderItemswhich 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