# \[ionic4\] ion-reorder is not working in ionic4

**URL:** <https://forum.ionicframework.com/t/ionic4-ion-reorder-is-not-working-in-ionic4/159266>\
**Category:** ionic-v3\
**Created:** [March 16, 2019, 2:46pm UTC](https://forum.ionicframework.com/t/ionic4-ion-reorder-is-not-working-in-ionic4/159266 "2019-03-16T14:46:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pantarmj](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@pantarmj](https://forum.ionicframework.com/u/pantarmj)\
**Post date:** [March 16, 2019, 2:46pm UTC](https://forum.ionicframework.com/t/ionic4-ion-reorder-is-not-working-in-ionic4/159266/1 "2019-03-16T14:46:03Z")

</div>

ion-reorder is not working in ionic4… it was working in ionic3… some help pls… my code is given below:

```auto
<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>

```

```auto
imageOrderChanged(reorderEvent) {
		reorderArray(this.arrImgObjects, reorderEvent);
		reorderArray(this.arrImageGuid, reorderEvent);
	}

```

@lucasbasquerotto

---

<div class="post-metadata">

**Author:** ![merv63](https://avatars.discourse-cdn.com/v4/letter/m/e9c0ed/32.png) [@merv63](https://forum.ionicframework.com/u/merv63)\
**Post date:** [March 17, 2019, 2:40pm UTC](https://forum.ionicframework.com/t/ionic4-ion-reorder-is-not-working-in-ionic4/159266/2 "2019-03-17T14:40:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pantarmj](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@pantarmj](https://forum.ionicframework.com/u/pantarmj)\
**Post date:** [March 19, 2019, 10:02am UTC](https://forum.ionicframework.com/t/ionic4-ion-reorder-is-not-working-in-ionic4/159266/3 "2019-03-19T10:02:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![merv63](https://avatars.discourse-cdn.com/v4/letter/m/e9c0ed/32.png) [@merv63](https://forum.ionicframework.com/u/merv63)\
**Post date:** [March 19, 2019, 12:19pm UTC](https://forum.ionicframework.com/t/ionic4-ion-reorder-is-not-working-in-ionic4/159266/5 "2019-03-19T12:19:10Z")

</div>

Sorry I meant put

```auto
 <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](https://ionicframework.com/docs/api/reorder-group)

Try this, I have not tested it so may need editing.

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![pantarmj](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@pantarmj](https://forum.ionicframework.com/u/pantarmj)\
**Post date:** [March 20, 2019, 5:32am UTC](https://forum.ionicframework.com/t/ionic4-ion-reorder-is-not-working-in-ionic4/159266/6 "2019-03-20T05:32:19Z")

</div>

Hurrey, really thanks dear @merv63 … This is working for me… Here is my code:

```auto
    <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>

```

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

```