feat(reorder-group): add ionReorderStart, ionReorderMove, ionReorderEnd events

[brandyscarney]

Issue number: resolves #23148 resolves #27614

---

What is the current behavior?

The ion-reorder-group only emits an ionItemReorder event when the reorder gesture ends AND the item position has changed. There is no way to listen for when the gesture starts, is actively moving, or ends without the item changing position.

What is the new behavior?

• Adds an ionReorderStart event which is fired without any details on the start of the gesture.
• Adds an ionReorderMove event which is fired on gesture move and includes the from and to detail.
• Adds an ionReorderEnd event which is fired on gesture end and includes the from and to detail ONLY if they are different, otherwise they are undefined.
• Deprecates the ionItemReorder event, recommending to use the ionReorderEnd instead.

Does this introduce a breaking change?

• [ ] Yes
• [x] No

While this does not introduce a breaking change, it does deprecate the ionItemReorder event in favor of the ionReorderEnd event. This event behaves a bit differently since it is always emitted on end, but if the to and from are the same then it won't emit them, so it is possible to check if they are undefined to determine if the ionReorderEnd fired without moving item positions.

Other information

Preview

Dev build: 8.6.2-dev.11749759855.198287b7

---

Co-authored-by: sfinktah <[email protected]>

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 23, 2025 1:34pm

[sfinktah]

@brandyscarney Thanks for the ping. Although I've only ever used Ionic once for a quick demo, I did grow quite attached to this functionality and invested as much effort as I could into replicating native behavior (considering I don't own an Android device, but got others to check the UI).

Let me look at the old example I put together and see if I can re-implement it with this PR.

Update: The first thing I'm noticing is that it's really hard to test on my PC with my ultra-wide monitor. Have you considered using something like <div class="ion-page" style="max-width: 400px;"> or a similar mechanism to make the demo preview feel more like a mobile app?

The second issue is that, because you're not limiting the re-order events to touches on the "movable" hamburger, there's no way to scroll through the page without accidentally reordering the items.

The third is that items with text that's slightly too long (and which have a toggle slider) behave oddly -- the line with the toggle sometimes loses its text, leaving only the toggle visible. (Possibly a line-wrap issue?) Strangely, if you switch to another window in iOS and return, everything renders perfectly again.

I also see you haven't implemented any dark mode support yet, which incidentally hides a fundamental issue I noticed at the time: the coloration doesn't quite look right when switching between light and dark themes.

I'm re-linking my old demo for reference: https://ionic-list.nt4.com/

In that demo, I also tried to emulate the grouped style typical of re-orderable lists in iOS -- though that may no longer be standard, and probably doesn't match Android's approach either.

So mostly I'm critiquing your demo rather than your PR, and I apologize for that -- but I'm lazy.

[sfinktah]

[brandyscarney]

Hey @sfinktah! Thanks for the feedback. Just to clarify, the demo I linked in the preview above is something we use internally for testing. It shows various ways to use the ion-reorder component in one place so we can easily verify consistent behavior across different use cases. It's not intended to be a production-ready app or a recommended pattern for real-world use. For smaller, more focused examples, check out the documentation: https://ionicframework.com/docs/api/reorder

All of the demos on the documentation site support dark mode based on system settings. We have a guide for customizing dark mode behavior here: https://ionicframework.com/docs/theming/dark-mode

You can also preview any of our internal tests in dark mode by appending ?ionic:palette=dark to the URL: https://ionic-framework-git-fw-6539-ionic1.vercel.app/src/components/reorder-group/test/basic?ionic:palette=dark

Unfortunately, your link doesn't seem to work for me. However, since this PR is focused on adding the new reorder events, any unrelated issues or improvements would need to be reported and addressed separately. 🙂

[sfinktah]

Hi @brandyscarney, apologies, updated the link. Because it's a demo SPA it thinks it has a bunch of URLs that it really doesn't.

So the two issues your demo showed me were that over-long text dissapeared temporarily (see above image which is missing item 11's text) when re-ordered, and that if you allow re-ordering to occur by pressing anywhere on the control, you can't scroll the list. (I couldn't get to the bottom item on my XS which I suspect it quite tall for a mobile device). That's what I noticed when testing on my iPhone with the latest everything.

If these aren't "real" issues, then no problems.

I will try and find the time to recall how ionic works, and to see if I can implement the tricky bits I needed for my app. There was a bit of magic required to get those rounded containers in which all re-orderable lists are house (at least in iphone land). https://ionic-list.nt4.com/

[brandyscarney]

Thanks @sfinktah, the link works now!

So the two issues your demo showed me were that over-long text dissapeared temporarily (see above image which is missing item 11's text) when re-ordered, and that if you allow re-ordering to occur by pressing anywhere on the control, you can't scroll the list. (I couldn't get to the bottom item on my XS which I suspect it quite tall for a mobile device). That's what I noticed when testing on my iPhone with the latest everything.

I can see the text disappearing on my iPhone, so it does seem like a legit bug or an issue with our e2e test (would need to look into it a bit more). I don't see any issues with scrolling, but maybe I need to add more items? When the reorder is enabled and the entire item is used as a reorder it shouldn't allow scrolling when you grab one.

I created a demo of the request in your original issue (https://github.com/ionic-team/ionic-framework/issues/27614) just to make sure that the new event made it possible: StackBlitz example. This might be a good starting point for what you are looking to do.

[sfinktah]

Because the last 4 or so links are "the whole item can be dragged", there is nowhere I can click and drag to scroll.

It occurs to me that might not be strictly true, I could perhaps scroll dragging item 5 or something, but I always scroll from the bottom.

[thetaPC]

The PR description related to ionReorderEnd ("Adds an ionReorderEnd event which is fired on gesture end and includes the from and to detail ONLY if they are different, otherwise they are undefined.") needs to be updated to reflect that the detail will always have a value.

[ptmkenny]

I just saw the deprecation message, but when I checked the docs, they're still recommending the deprecated way, at least for react: https://ionicframework.com/docs/api/reorder

[ShaneK]

I just saw the deprecation message, but when I checked the docs, they're still recommending the deprecated way, at least for react: https://ionicframework.com/docs/api/reorder

@ptmkenny Our docs 8.7 update failed to deploy yesterday, it's something we're going to address today

[ShaneK]

@ptmkenny the docs have been updated with the 8.7 documentation