[ionic4] ion-reorder is not working in ionic4

#1

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

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

#3

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

#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
#6

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