ion-reorder is not working in ionic4… it was working in ionic3… some help pls… my code is given below:
<ion-item-group reorder="true" (ionItemReorder)="imageOrderChanged($event)">
<ion-item *ngFor="let obj of arrImgObjects; let i=index;" style="border-bottom: 0;">
<!-- <ion-row> -->
<ion-thumbnail slot="start">
<img src="{{obj.Variations.ThumbCrop.Asset.DateStamp+'/'+obj.Variations.ThumbCrop.Asset.Reference | imgUrlPipe}}" alt="image" style="height:6em; width:6em;">
</ion-thumbnail>
<div>
<ion-button expand="full" (click)="rotateImage(i, obj.GUID)" style="background-color:lightblue;">ROTATE
<ion-icon name="redo" style="color:black; margin-left:5px;"></ion-icon>
</ion-button>
<ion-button expand="full" (click)="deleteImage(i, obj.GUID)" style="background-color:lightblue; margin-top:20px;">DELETE
<ion-icon name="trash" style="color:black; margin-left:5px;"></ion-icon>
</ion-button>
</div>
<!-- </ion-row> -->
</ion-item>
</ion-item-group>
imageOrderChanged(reorderEvent) {
reorderArray(this.arrImgObjects, reorderEvent);
reorderArray(this.arrImageGuid, reorderEvent);
}
@lucasbasquerotto
merv63
2
Change ion-item-group to ion-reorder-group,
Change reorder=“true” to disabled=“false”
Put at the end inside your ion-item after the div.
imageOrderChanged(event: any) {
const itemToMove = this.item.splice(event.detail.from, 1)[0];
this.item.splice(event.detail.to, 0, itemToMove);
event.detail.complete();}
what do you mean by “Put at the end inside your ion-item after the div.” Can you plz write your suggestion in the form of code?
@merv63
merv63
5
Sorry I meant put
<ion-reorder slot="end"></ion-reorder>
at the end inside your ion-item after the div.
Check out https://ionicframework.com/docs/api/reorder-group
Try this, I have not tested it so may need editing.
<ion-reorder-group disabled=“false” (ionItemReorder)="imageOrderChanged($event)">
<ion-item *ngFor="let obj of arrImgObjects; let i=index;" style="border-bottom: 0;">
<ion-thumbnail slot="start">
<img src="{{obj.Variations.ThumbCrop.Asset.DateStamp+'/'+obj.Variations.ThumbCrop.Asset.Reference | imgUrlPipe}}" alt="image" style="height:6em; width:6em;">
</ion-thumbnail>
<div>
<ion-button expand="full" (click)="rotateImage(i, obj.GUID)" style="background-color:lightblue;">ROTATE
<ion-icon name="redo" style="color:black; margin-left:5px;"></ion-icon>
</ion-button>
<ion-button expand="full" (click)="deleteImage(i, obj.GUID)" style="background-color:lightblue; margin-top:20px;">DELETE
<ion-icon name="trash" style="color:black; margin-left:5px;"></ion-icon>
</ion-button>
</div>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
1 Like
Hurrey, really thanks dear @merv63 … This is working for me… Here is my code:
<ion-reorder-group disabled="false" (ionItemReorder)="imageOrderChanged($event)">
<ion-item *ngFor="let obj of arrImgObjects; let i=index;" id="item-img">
<ion-thumbnail slot="start">
<img src="{{obj.Variations.ThumbCrop.Asset.DateStamp+'/'+obj.Variations.ThumbCrop.Asset.Reference | imgUrlPipe}}" alt="image">
</ion-thumbnail>
<div style="width:95%;">
<ion-button expand="full" (click)="rotateImage(i, obj.GUID)" id="BtnRotate"> ROTATE
<ion-icon name="redo" style="color:black; margin-left:5px;"></ion-icon>
</ion-button>
<ion-button expand="full" (click)="deleteImage(i, obj.GUID)" id="BtnDelete"> DELETE
<ion-icon name="trash" style="color:black; margin-left:5px;"></ion-icon>
</ion-button>
</div>
<ion-reorder slot="end" style="margin-left:0;"></ion-reorder>
</ion-item>
</ion-reorder-group>
imageOrderChanged(event: any) {
const itemToMove1 = this.arrImgObjects.splice(event.detail.from, 1)[0];
this.arrImgObjects.splice(event.detail.to, 0, itemToMove1);
const itemToMove2 = this.arrImageGuid.splice(event.detail.from, 1)[0];
this.arrImageGuid.splice(event.detail.to, 0, itemToMove2);
event.detail.complete();
}