diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index c3c6c4e9508..2d1d7f73fd3 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -16,27 +16,71 @@ import Slots from '@ionic-internal/component-api/v8/reorder-group/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-The reorder group is a container for items using the [reorder](./reorder) component. When the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for this event should be implemented that calls the `complete` method.
+The reorder group is a container for items using the [reorder](./reorder) component. When the user drags an item and drops it, the `ionReorderEnd` event is dispatched. A handler for this event should be implemented that calls the `complete` method.
 
-The `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index. For example usage of the reorder group, see the [reorder](./reorder) documentation.
+The `detail` property of the `ionReorderEnd` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` an index. For example usage of the reorder group, see the [reorder](./reorder) documentation.
 
 
 ## Interfaces
 
-### ItemReorderEventDetail
+### ReorderMoveEventDetail
 
 ```typescript
-interface ItemReorderEventDetail {
+interface ReorderMoveEventDetail {
+  from: number;
+  to: number;
+}
+```
+
+### ReorderEndEventDetail
+
+```typescript
+interface ReorderEndEventDetail {
   from: number;
   to: number;
   complete: (data?: boolean | any[]) => any;
 }
 ```
 
-### ItemReorderCustomEvent
+### ReorderMoveCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface ReorderMoveCustomEvent extends CustomEvent {
+  detail: ReorderMoveEventDetail;
+  target: HTMLIonReorderGroupElement;
+}
+
+```
+
+### ReorderEndCustomEvent
 
 While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
 
+```typescript
+interface ReorderEndCustomEvent extends CustomEvent {
+  detail: ReorderEndEventDetail;
+  target: HTMLIonReorderGroupElement;
+}
+```
+
+### ItemReorderEventDetail (deprecated)
+
+**_Deprecated_** — Use the `ionReorderEnd` event with `ReorderEndEventDetail` instead.
+
+```typescript
+interface ItemReorderEventDetail {
+  from: number;
+  to: number;
+  complete: (data?: boolean | any[]) => any;
+}
+```
+
+### ItemReorderCustomEvent (deprecated)
+
+**_Deprecated_** — Use the `ionReorderEnd` event with `ReorderEndCustomEvent` instead.
+
 ```typescript
 interface ItemReorderCustomEvent extends CustomEvent {
   detail: ItemReorderEventDetail;
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index ad07a4290ea..5f771c9badf 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Reorder is a component that allows an item to be dragged to change its order within a group of items. It must be used within a [reorder group](./reorder-group) to provide a visual drag and drop interface.
 
-The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionItemReorder` event will be dispatched from the reorder group and the `complete` method needs to be called.
+The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionReorderEnd` event will be dispatched from the reorder group and the `complete` method needs to be called.
 
 
 ## Basic Usage
@@ -73,6 +73,29 @@ import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';
 
 <UpdatingData />
 
+## Event Handling
+
+### Using `ionReorderStart` and `ionReorderEnd`
+
+The `ionReorderStart` event is emitted when the user begins a reorder gesture. This event fires when the user taps and holds an item, before any movement occurs. This is useful for preparing the UI for the reorder operation, such as hiding certain elements or updating the visual state of items. For example, icons in list items can be hidden while they are being dragged and shown again when the reorder is complete.
+
+The `ionReorderEnd` event is emitted when the user completes the reorder gesture. This occurs when the user releases the item they are dragging, for example by lifting their finger on a touch screen or releasing the mouse button. The event includes the `from` and `to` indices of the item, as well as the `complete` method that should be called to finalize the reorder operation. The `from` index will always be the position of the item when the gesture started, while the `to` index will be its final position. This event will fire even if no items have changed position, in which case the `from` and `to` indices will be the same.
+
+import ReorderStartEndEvents from '@site/static/usage/v8/reorder/reorder-start-end-events/index.md';
+
+<ReorderStartEndEvents />
+
+### Using `ionReorderMove`
+
+The `ionReorderMove` event is emitted continuously during the reorder gesture as the user drags an item. The event includes the `from` and `to` indices of the item. Unlike `ionReorderEnd`, the `from` index in this event represents the last known position of the item (which updates as the item moves), while the `to` index represents its current position. If the item has not changed position since the last event, the `from` and `to` indices will be the same. This event is useful for tracking position changes during the drag operation. For example, the ranking or numbering of items can be updated in real-time as they are being dragged to maintain a logical ascending order.
+
+:::warning
+Do not call the `complete` method during the `ionReorderMove` event as it can break the gesture.
+:::
+
+import ReorderMoveEvent from '@site/static/usage/v8/reorder/reorder-move-event/index.md';
+
+<ReorderMoveEvent />
 
 ## Usage with Virtual Scroll
 
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index d3b3d2d7255..90e59ee09f3 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -145,7 +145,7 @@ ${properties
   .map((prop) => {
     const isDeprecated = prop.deprecation !== undefined;
 
-    const docs = isDeprecated ? `${prop.docs}\n_Deprecated_ ${prop.deprecation}` : prop.docs;
+    const docs = isDeprecated ? `${prop.docs}\n\n**_Deprecated_** — ${prop.deprecation}` : prop.docs;
 
     return `
 ### ${prop.name} ${isDeprecated ? '(deprecated)' : ''}
@@ -170,7 +170,15 @@ function renderEvents({ events }) {
   return `
 | Name | Description | Bubbles |
 | --- | --- | --- |
-${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} | \`${event.bubbles}\` |`).join('\n')}`;
+${events
+  .map((event) => {
+    const isDeprecated = event.deprecation !== undefined;
+    const docs = isDeprecated ? `${event.docs}\n\n**_Deprecated_** — ${event.deprecation}` : event.docs;
+    return `| \`${event.event}\` ${isDeprecated ? '**(deprecated)**' : ''} | ${formatMultiline(docs)} | \`${
+      event.bubbles
+    }\` |`;
+  })
+  .join('\n')}`;
 }
 
 /**
diff --git a/static/demos/api/reorder/index.html b/static/demos/api/reorder/index.html
index 695a50c2701..3903da1eb7d 100644
--- a/static/demos/api/reorder/index.html
+++ b/static/demos/api/reorder/index.html
@@ -99,7 +99,7 @@
       function toggleReorder() {
         const reorderGroup = document.getElementById('reorder');
         reorderGroup.disabled = !reorderGroup.disabled;
-        reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+        reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
           detail.complete(true);
         });
       }
diff --git a/static/usage/v8/reorder/basic/angular/example_component_html.md b/static/usage/v8/reorder/basic/angular/example_component_html.md
index 60795eaa3ff..8b1294bd101 100644
--- a/static/usage/v8/reorder/basic/angular/example_component_html.md
+++ b/static/usage/v8/reorder/basic/angular/example_component_html.md
@@ -2,7 +2,7 @@
 <ion-list>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
     <ion-item>
       <ion-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md
index 541fd9c6df3..5553891178a 100644
--- a/static/usage/v8/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md
@@ -1,12 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
 import {
-  ItemReorderEventDetail,
   IonItem,
   IonLabel,
   IonList,
   IonReorder,
   IonReorderGroup,
+  ReorderEndCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,14 +16,14 @@ import {
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 }
diff --git a/static/usage/v8/reorder/basic/demo.html b/static/usage/v8/reorder/basic/demo.html
index f9afb7d750a..7b8abca0b96 100644
--- a/static/usage/v8/reorder/basic/demo.html
+++ b/static/usage/v8/reorder/basic/demo.html
@@ -11,7 +11,7 @@
 
     <style>
       ion-list {
-        width: 100%;
+        width: 300px;
       }
     </style>
   </head>
@@ -56,14 +56,14 @@
     <script>
       const reorderGroup = document.querySelector('ion-reorder-group');
 
-      reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', detail.from, 'to', detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         detail.complete();
       });
     </script>
diff --git a/static/usage/v8/reorder/basic/javascript.md b/static/usage/v8/reorder/basic/javascript.md
index fe805d10fc6..4b07e8ad210 100644
--- a/static/usage/v8/reorder/basic/javascript.md
+++ b/static/usage/v8/reorder/basic/javascript.md
@@ -32,14 +32,14 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', detail.from, 'to', detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     detail.complete();
   });
 </script>
diff --git a/static/usage/v8/reorder/basic/react.md b/static/usage/v8/reorder/basic/react.md
index abe3b187294..397ebc395d7 100644
--- a/static/usage/v8/reorder/basic/react.md
+++ b/static/usage/v8/reorder/basic/react.md
@@ -1,23 +1,23 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
 
 function Example() {
-  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 
   return (
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
         <IonItem>
           <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end"></IonReorder>
diff --git a/static/usage/v8/reorder/basic/vue.md b/static/usage/v8/reorder/basic/vue.md
index 0ac2374089f..285a1c347be 100644
--- a/static/usage/v8/reorder/basic/vue.md
+++ b/static/usage/v8/reorder/basic/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-    <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
       <ion-item>
         <ion-label> Item 1 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
@@ -32,24 +32,24 @@
 </template>
 
 <script lang="ts">
-  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
     setup() {
-      const handleReorder = (event: CustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         event.detail.complete();
       };
 
-      return { handleReorder };
+      return { handleReorderEnd };
     },
   });
 </script>
diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
index 6d1fb8960bd..cc6692c862d 100644
--- a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
+++ b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
@@ -2,7 +2,7 @@
 <ion-list>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
     <ion-item>
       <ion-label> Item 1 </ion-label>
       <ion-reorder slot="end">
diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
index e9bdafd6df8..4d0472c0bd3 100644
--- a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
@@ -1,13 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
 import {
-  ItemReorderEventDetail,
   IonIcon,
   IonItem,
   IonLabel,
   IonList,
   IonReorder,
   IonReorderGroup,
+  ReorderEndCustomEvent,
 } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
@@ -29,14 +29,14 @@ export class ExampleComponent {
     addIcons({ pizza });
   }
 
-  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 }
diff --git a/static/usage/v8/reorder/custom-icon/demo.html b/static/usage/v8/reorder/custom-icon/demo.html
index ab2c55b9423..b089815bd07 100644
--- a/static/usage/v8/reorder/custom-icon/demo.html
+++ b/static/usage/v8/reorder/custom-icon/demo.html
@@ -11,7 +11,7 @@
 
     <style>
       ion-list {
-        width: 100%;
+        width: 300px;
       }
     </style>
   </head>
@@ -66,14 +66,14 @@
     <script>
       const reorderGroup = document.querySelector('ion-reorder-group');
 
-      reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', detail.from, 'to', detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         detail.complete();
       });
     </script>
diff --git a/static/usage/v8/reorder/custom-icon/javascript.md b/static/usage/v8/reorder/custom-icon/javascript.md
index d7aa87d8f64..8535da7544a 100644
--- a/static/usage/v8/reorder/custom-icon/javascript.md
+++ b/static/usage/v8/reorder/custom-icon/javascript.md
@@ -42,14 +42,14 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', detail.from, 'to', detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     detail.complete();
   });
 </script>
diff --git a/static/usage/v8/reorder/custom-icon/javascript/index_html.md b/static/usage/v8/reorder/custom-icon/javascript/index_html.md
index d7aa87d8f64..8535da7544a 100644
--- a/static/usage/v8/reorder/custom-icon/javascript/index_html.md
+++ b/static/usage/v8/reorder/custom-icon/javascript/index_html.md
@@ -42,14 +42,14 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', detail.from, 'to', detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     detail.complete();
   });
 </script>
diff --git a/static/usage/v8/reorder/custom-icon/react.md b/static/usage/v8/reorder/custom-icon/react.md
index 9103db6029d..f5fe620035b 100644
--- a/static/usage/v8/reorder/custom-icon/react.md
+++ b/static/usage/v8/reorder/custom-icon/react.md
@@ -1,24 +1,24 @@
 ```tsx
 import React from 'react';
-import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
 import { pizza } from 'ionicons/icons';
 
 function Example() {
-  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 
   return (
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
         <IonItem>
           <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end">
diff --git a/static/usage/v8/reorder/custom-icon/vue.md b/static/usage/v8/reorder/custom-icon/vue.md
index 87d77e33048..eec6b5222a9 100644
--- a/static/usage/v8/reorder/custom-icon/vue.md
+++ b/static/usage/v8/reorder/custom-icon/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-    <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
       <ion-item>
         <ion-label> Item 1 </ion-label>
         <ion-reorder slot="end">
@@ -42,24 +42,24 @@
 </template>
 
 <script lang="ts">
-  import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/vue';
   import { defineComponent } from 'vue';
   import { pizza } from 'ionicons/icons';
 
   export default defineComponent({
     components: { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
     setup() {
-      const handleReorder = (event: CustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         event.detail.complete();
       };
-      return { handleReorder, pizza };
+      return { handleReorderEnd, pizza };
     },
   });
 </script>
diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
index 2296a5506c4..73fc3967021 100644
--- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
+++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
@@ -4,7 +4,7 @@
     <ion-list>
       <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
       <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-      <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+      <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
         <ion-item>
           <ion-label> Item 1 </ion-label>
           <ion-reorder slot="end"></ion-reorder>
diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
index bdd83c0417f..84dedb755b1 100644
--- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -1,7 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 import {
-  ItemReorderEventDetail,
+  ReorderEndCustomEvent,
   IonContent,
   IonItem,
   IonLabel,
@@ -17,14 +17,14 @@ import {
   imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 }
diff --git a/static/usage/v8/reorder/custom-scroll-target/demo.html b/static/usage/v8/reorder/custom-scroll-target/demo.html
index 760fb525d79..fb66a69e0ce 100644
--- a/static/usage/v8/reorder/custom-scroll-target/demo.html
+++ b/static/usage/v8/reorder/custom-scroll-target/demo.html
@@ -10,16 +10,17 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
 
     <style>
-      ion-list {
-        width: 100%;
+      .container {
+        position: relative;
+
+        width: 300px;
+        margin: 0 auto;
       }
 
       .ion-content-scroll-host {
         position: absolute;
-        top: 0;
         left: 0;
 
-        height: 100%;
         width: 100%;
         overflow-y: auto;
       }
@@ -68,14 +69,14 @@
     <script>
       const reorderGroup = document.querySelector('ion-reorder-group');
 
-      reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', detail.from, 'to', detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         detail.complete();
       });
     </script>
diff --git a/static/usage/v8/reorder/custom-scroll-target/javascript.md b/static/usage/v8/reorder/custom-scroll-target/javascript.md
index 533a5815497..337d0dbf616 100644
--- a/static/usage/v8/reorder/custom-scroll-target/javascript.md
+++ b/static/usage/v8/reorder/custom-scroll-target/javascript.md
@@ -36,14 +36,14 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', detail.from, 'to', detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     detail.complete();
   });
 </script>
diff --git a/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md
index 8a3a8eea92c..79ef62da9d7 100644
--- a/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md
@@ -7,20 +7,20 @@ import {
   IonList,
   IonReorder,
   IonReorderGroup,
-  ItemReorderEventDetail,
+  ReorderEndCustomEvent,
 } from '@ionic/react';
 
 import './main.css';
 
 function Example() {
-  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 
@@ -29,7 +29,7 @@ function Example() {
       <div className="ion-content-scroll-host">
         <IonList>
           {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-          <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+          <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
             <IonItem>
               <IonLabel>Item 1</IonLabel>
               <IonReorder slot="end"></IonReorder>
diff --git a/static/usage/v8/reorder/custom-scroll-target/vue.md b/static/usage/v8/reorder/custom-scroll-target/vue.md
index 43151b12039..6ca1b9cdf6a 100644
--- a/static/usage/v8/reorder/custom-scroll-target/vue.md
+++ b/static/usage/v8/reorder/custom-scroll-target/vue.md
@@ -4,7 +4,7 @@
     <div class="ion-content-scroll-host">
       <ion-list>
         <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-        <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+        <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
           <ion-item>
             <ion-label> Item 1 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
@@ -36,24 +36,32 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import {
+    IonContent,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonReorder,
+    IonReorderGroup,
+    ReorderEndCustomEvent,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
     setup() {
-      const handleReorder = (event: CustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         event.detail.complete();
       };
 
-      return { handleReorder };
+      return { handleReorderEnd };
     },
   });
 </script>
diff --git a/static/usage/v8/reorder/reorder-move-event/angular/example_component_html.md b/static/usage/v8/reorder/reorder-move-event/angular/example_component_html.md
new file mode 100644
index 00000000000..02e2dc827ac
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-move-event/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+<ion-list lines="full">
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+  <ion-reorder-group
+    [disabled]="false"
+    (ionReorderMove)="handleReorderMove($any($event))"
+    (ionReorderEnd)="handleReorderEnd($any($event))"
+  >
+    @for (item of items; track item; let i = $index) {
+    <ion-item [id]="'item-' + (i + 1)">
+      <b slot="start">{{ i + 1 }}</b>
+      <ion-label>{{ item }}</ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+    }
+  </ion-reorder-group>
+</ion-list>
+```
diff --git a/static/usage/v8/reorder/reorder-move-event/angular/example_component_ts.md b/static/usage/v8/reorder/reorder-move-event/angular/example_component_ts.md
new file mode 100644
index 00000000000..dd283c07865
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-move-event/angular/example_component_ts.md
@@ -0,0 +1,79 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+  ReorderEndCustomEvent,
+  ReorderMoveCustomEvent,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
+})
+export class ExampleComponent {
+  items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
+
+  handleReorderMove(event: ReorderMoveCustomEvent) {
+    const from = event.detail.from;
+    const to = event.detail.to;
+
+    if (from !== to) {
+      console.log('Dragged from index', from, 'to', to);
+    }
+
+    // Get all items and sort by their current id (item-1, item-2, ...)
+    const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => {
+      const aNum = parseInt(a.id.replace('item-', ''), 10);
+      const bNum = parseInt(b.id.replace('item-', ''), 10);
+      return aNum - bNum;
+    });
+
+    // Dragging down: shift up items between from+1 and to, set dragged to to+1
+    if (from < to) {
+      for (let i = from; i <= to; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (itemNum) {
+          if (i === from) {
+            // Dragged item
+            itemNum.textContent = String(to + 1);
+            item.id = `item-${to + 1}`;
+          } else {
+            // Items shift up
+            itemNum.textContent = String(i);
+            item.id = `item-${i}`;
+          }
+        }
+      }
+      // Dragging up: shift down items between to and from-1, set dragged to to+1
+    } else if (from > to) {
+      for (let i = to; i <= from; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (itemNum) {
+          if (i === from) {
+            // Dragged item
+            itemNum.textContent = String(to + 1);
+            item.id = `item-${to + 1}`;
+          } else {
+            // Items shift down
+            itemNum.textContent = String(i + 2);
+            item.id = `item-${i + 2}`;
+          }
+        }
+      }
+    }
+  }
+
+  handleReorderEnd(event: ReorderEndCustomEvent) {
+    // Finish the reorder and update the items data
+    this.items = event.detail.complete(this.items);
+  }
+}
+```
diff --git a/static/usage/v8/reorder/reorder-move-event/demo.html b/static/usage/v8/reorder/reorder-move-event/demo.html
new file mode 100644
index 00000000000..8ebcd5984ae
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-move-event/demo.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Reorder</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-list {
+        width: 300px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list lines="full">
+            <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+            <ion-reorder-group disabled="false"></ion-reorder-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      let items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
+      const reorderGroup = document.querySelector('ion-reorder-group');
+
+      document.addEventListener('DOMContentLoaded', () => {
+        reorderItems(items);
+      });
+
+      reorderGroup.addEventListener('ionReorderMove', ({ detail }) => {
+        const from = detail.from;
+        const to = detail.to;
+
+        if (from !== to) {
+          console.log('Dragged from index', from, 'to', to);
+        }
+
+        // Get all items and sort by their current id (item-1, item-2, ...)
+        const itemElements = Array.from(reorderGroup.querySelectorAll('ion-item')).sort((a, b) => {
+          const aNum = parseInt(a.id.replace('item-', ''), 10);
+          const bNum = parseInt(b.id.replace('item-', ''), 10);
+          return aNum - bNum;
+        });
+
+        // Dragging down: shift up items between from+1 and to, set dragged to to+1
+        if (from < to) {
+          for (let i = from; i <= to; i++) {
+            const item = itemElements[i];
+            const itemNum = item.querySelector('b');
+            if (i === from) {
+              // Dragged item
+              itemNum.textContent = to + 1;
+              item.id = `item-${to + 1}`;
+            } else {
+              // Items shift up
+              itemNum.textContent = i;
+              item.id = `item-${i}`;
+            }
+          }
+          // Dragging up: shift down items between to and from-1, set dragged to to+1
+        } else if (from > to) {
+          for (let i = to; i <= from; i++) {
+            const item = itemElements[i];
+            const itemNum = item.querySelector('b');
+            if (i === from) {
+              // Dragged item
+              itemNum.textContent = to + 1;
+              item.id = `item-${to + 1}`;
+            } else {
+              // Items shift down
+              itemNum.textContent = i + 2;
+              item.id = `item-${i + 2}`;
+            }
+          }
+        }
+      });
+
+      reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
+        // Finish the reorder and update the items data
+        items = detail.complete(items);
+
+        // Re-render the DOM to match the new order
+        reorderItems(items);
+      });
+
+      function reorderItems(items) {
+        reorderGroup.replaceChildren();
+
+        let reordered = '';
+
+        for (let i = 0; i < items.length; i++) {
+          reordered += `
+            <ion-item id="item-${i + 1}">
+              <b slot="start">${i + 1}</b>
+              <ion-label>
+                ${items[i]}
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+          `;
+        }
+
+        reorderGroup.innerHTML = reordered;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/reorder/reorder-move-event/index.md b/static/usage/v8/reorder/reorder-move-event/index.md
new file mode 100644
index 00000000000..be938ff393c
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-move-event/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v8/reorder/reorder-move-event/demo.html"
+  size="300px"
+  showConsole={true}
+/>
diff --git a/static/usage/v8/reorder/reorder-move-event/javascript.md b/static/usage/v8/reorder/reorder-move-event/javascript.md
new file mode 100644
index 00000000000..e559409668b
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-move-event/javascript.md
@@ -0,0 +1,89 @@
+```html
+<ion-list lines="full">
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group disabled="false"></ion-reorder-group>
+</ion-list>
+
+<script>
+  let items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
+  const reorderGroup = document.querySelector('ion-reorder-group');
+
+  reorderItems(items);
+
+  reorderGroup.addEventListener('ionReorderMove', ({ detail }) => {
+    const from = detail.from;
+    const to = detail.to;
+
+    if (from !== to) {
+      console.log('Dragged from index', from, 'to', to);
+    }
+
+    // Get all items and sort by their current id (item-1, item-2, ...)
+    const itemElements = Array.from(reorderGroup.querySelectorAll('ion-item')).sort((a, b) => {
+      const aNum = parseInt(a.id.replace('item-', ''), 10);
+      const bNum = parseInt(b.id.replace('item-', ''), 10);
+      return aNum - bNum;
+    });
+
+    // Dragging down: shift up items between from+1 and to, set dragged to to+1
+    if (from < to) {
+      for (let i = from; i <= to; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (i === from) {
+          // Dragged item
+          itemNum.textContent = to + 1;
+          item.id = `item-${to + 1}`;
+        } else {
+          // Items shift up
+          itemNum.textContent = i;
+          item.id = `item-${i}`;
+        }
+      }
+      // Dragging up: shift down items between to and from-1, set dragged to to+1
+    } else if (from > to) {
+      for (let i = to; i <= from; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (i === from) {
+          // Dragged item
+          itemNum.textContent = to + 1;
+          item.id = `item-${to + 1}`;
+        } else {
+          // Items shift down
+          itemNum.textContent = i + 2;
+          item.id = `item-${i + 2}`;
+        }
+      }
+    }
+  });
+
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
+    // Finish the reorder and update the items data
+    items = detail.complete(items);
+
+    // Re-render the DOM to match the new order
+    reorderItems(items);
+  });
+
+  function reorderItems(items) {
+    reorderGroup.replaceChildren();
+
+    let reordered = '';
+
+    for (let i = 0; i < items.length; i++) {
+      reordered += `
+        <ion-item id="item-${i + 1}">
+          <b slot="start">${i + 1}</b>
+          <ion-label>
+            ${items[i]}
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+      `;
+    }
+
+    reorderGroup.innerHTML = reordered;
+  }
+</script>
+```
diff --git a/static/usage/v8/reorder/reorder-move-event/react.md b/static/usage/v8/reorder/reorder-move-event/react.md
new file mode 100644
index 00000000000..39a0680728d
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-move-event/react.md
@@ -0,0 +1,92 @@
+```tsx
+import React, { useState } from 'react';
+import {
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+  ReorderEndCustomEvent,
+  ReorderMoveCustomEvent,
+} from '@ionic/react';
+
+function Example() {
+  const [items, setItems] = useState([
+    'Buy groceries',
+    'Call the bank',
+    'Finish project report',
+    'Book flight tickets',
+    'Read a book',
+  ]);
+
+  function handleReorderMove(event: ReorderMoveCustomEvent) {
+    const from = event.detail.from;
+    const to = event.detail.to;
+
+    if (from !== to) {
+      console.log('Dragged from index', from, 'to', to);
+    }
+
+    // Get all items and sort by their current id (item-1, item-2, ...)
+    const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => {
+      const aNum = parseInt(a.id.replace('item-', ''), 10);
+      const bNum = parseInt(b.id.replace('item-', ''), 10);
+      return aNum - bNum;
+    });
+
+    // Dragging down: shift up items between from+1 and to, set dragged to to+1
+    if (from < to) {
+      for (let i = from; i <= to; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (i === from) {
+          // Dragged item
+          itemNum!.textContent = String(to + 1);
+          item.id = `item-${to + 1}`;
+        } else {
+          // Items shift up
+          itemNum!.textContent = String(i);
+          item.id = `item-${i}`;
+        }
+      }
+      // Dragging up: shift down items between to and from-1, set dragged to to+1
+    } else if (from > to) {
+      for (let i = to; i <= from; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (i === from) {
+          // Dragged item
+          itemNum!.textContent = String(to + 1);
+          item.id = `item-${to + 1}`;
+        } else {
+          // Items shift down
+          itemNum!.textContent = String(i + 2);
+          item.id = `item-${i + 2}`;
+        }
+      }
+    }
+  }
+
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
+    // Finish the reorder and update the items data
+    setItems(event.detail.complete(items));
+  }
+
+  return (
+    <IonList lines="full">
+      {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+      <IonReorderGroup disabled={false} onIonReorderMove={handleReorderMove} onIonReorderEnd={handleReorderEnd}>
+        {items.map((item, index) => (
+          <IonItem key={item} id={`item-${index + 1}`}>
+            <b slot="start">{index + 1}</b>
+            <IonLabel>{item}</IonLabel>
+            <IonReorder slot="end"></IonReorder>
+          </IonItem>
+        ))}
+      </IonReorderGroup>
+    </IonList>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v8/reorder/reorder-move-event/vue.md b/static/usage/v8/reorder/reorder-move-event/vue.md
new file mode 100644
index 00000000000..cd3518e5aac
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-move-event/vue.md
@@ -0,0 +1,81 @@
+```html
+<template>
+  <ion-list lines="full">
+    <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+    <ion-reorder-group :disabled="false" @ionReorderMove="handleReorderMove" @ionReorderEnd="handleReorderEnd">
+      <ion-item v-for="(item, index) in items" :key="index" :id="`item-${index + 1}`">
+        <b slot="start">{{ index + 1 }}</b>
+        <ion-label>{{ item }}</ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+    </ion-reorder-group>
+  </ion-list>
+</template>
+
+<script setup lang="ts">
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/vue';
+  import { ref } from 'vue';
+
+  const items = ref(['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book']);
+
+  const handleReorderMove = (event: ReorderEndCustomEvent) => {
+    const from = event.detail.from;
+    const to = event.detail.to;
+
+    if (from !== to) {
+      console.log('Dragged from index', from, 'to', to);
+    }
+
+    // Get all items and sort by their current id (item-1, item-2, ...)
+    const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => {
+      const aNum = parseInt(a.id.replace('item-', ''), 10);
+      const bNum = parseInt(b.id.replace('item-', ''), 10);
+      return aNum - bNum;
+    });
+
+    // Dragging down: shift up items between from+1 and to, set dragged to to+1
+    if (from < to) {
+      for (let i = from; i <= to; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (i === from) {
+          // Dragged item
+          itemNum.textContent = String(to + 1);
+          item.id = `item-${to + 1}`;
+        } else {
+          // Items shift up
+          itemNum.textContent = String(i);
+          item.id = `item-${i}`;
+        }
+      }
+    } else if (from > to) {
+      for (let i = to; i <= from; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (i === from) {
+          // Dragged item
+          itemNum.textContent = String(to + 1);
+          item.id = `item-${to + 1}`;
+        } else {
+          // Items shift down
+          itemNum.textContent = String(i + 2);
+          item.id = `item-${i + 2}`;
+        }
+      }
+    }
+  };
+
+  const handleReorderEnd = (event: ReorderEndCustomEvent) => {
+    // Finish the reorder and update the items data
+    items.value = event.detail.complete(items.value);
+
+    // Update all item numbers and IDs to match their new positions
+    const itemElements = document.querySelectorAll('ion-item');
+    itemElements.forEach((item, index) => {
+      const itemNum = item.querySelector('b');
+      itemNum.textContent = String(index + 1);
+      item.id = `item-${index + 1}`;
+    });
+  };
+</script>
+```
diff --git a/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_html.md b/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_html.md
new file mode 100644
index 00000000000..7b9be3a150c
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+  <ion-reorder-group
+    [disabled]="false"
+    (ionReorderStart)="handleReorderStart()"
+    (ionReorderEnd)="handleReorderEnd($any($event))"
+  >
+    @for (item of items; track item; let i = $index) {
+    <ion-item>
+      <ion-label>{{ item.label }}</ion-label>
+      <ion-icon #icon [name]="item.icon" [color]="item.color" slot="end"></ion-icon>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+    }
+  </ion-reorder-group>
+</ion-list>
+```
diff --git a/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_ts.md b/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_ts.md
new file mode 100644
index 00000000000..ec4ccbdb946
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_ts.md
@@ -0,0 +1,62 @@
+```ts
+import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';
+import {
+  ReorderEndCustomEvent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+  IonIcon,
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { caretDown, ellipse, warning } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, IonIcon],
+})
+export class ExampleComponent {
+  items = [
+    { label: 'Buy groceries', icon: 'warning', color: 'warning' },
+    { label: 'Call the bank', icon: 'warning', color: 'warning' },
+    { label: 'Finish project report', icon: 'ellipse', color: 'light' },
+    { label: 'Book flight tickets', icon: 'ellipse', color: 'light' },
+    { label: 'Read a book', icon: 'caret-down', color: 'secondary' },
+  ];
+
+  @ViewChildren('icon', { read: ElementRef }) icons!: QueryList<ElementRef<HTMLIonIconElement>>;
+
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ caretDown, ellipse, warning });
+  }
+
+  handleReorderStart() {
+    console.log('Reorder started');
+
+    // Hide the icons when the reorder starts
+    this.icons.forEach((icon) => {
+      icon.nativeElement.style.opacity = '0';
+    });
+  }
+
+  handleReorderEnd(event: ReorderEndCustomEvent) {
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Show the icons again
+    this.icons.forEach((icon) => {
+      icon.nativeElement.style.opacity = '1';
+    });
+
+    // Finish the reorder and update the items data
+    this.items = event.detail.complete(this.items);
+  }
+}
+```
diff --git a/static/usage/v8/reorder/reorder-start-end-events/demo.html b/static/usage/v8/reorder/reorder-start-end-events/demo.html
new file mode 100644
index 00000000000..72e214b83fe
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-start-end-events/demo.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Reorder</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-list {
+        width: 300px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+            <ion-reorder-group disabled="false">
+              <ion-item>
+                <ion-label>Buy groceries</ion-label>
+                <ion-icon name="warning" color="warning" slot="end"></ion-icon>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+              <ion-item>
+                <ion-label>Call the bank</ion-label>
+                <ion-icon name="warning" color="warning" slot="end"></ion-icon>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+              <ion-item>
+                <ion-label>Finish project report</ion-label>
+                <ion-icon name="ellipse" color="light" slot="end"></ion-icon>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+              <ion-item>
+                <ion-label>Book flight tickets</ion-label>
+                <ion-icon name="ellipse" color="light" slot="end"></ion-icon>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+              <ion-item>
+                <ion-label>Read a book</ion-label>
+                <ion-icon name="caret-down" color="secondary" slot="end"></ion-icon>
+                <ion-reorder slot="end"></ion-reorder>
+              </ion-item>
+            </ion-reorder-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const reorderGroup = document.querySelector('ion-reorder-group');
+      const icons = document.querySelectorAll('ion-icon');
+      reorderGroup.addEventListener('ionReorderStart', () => {
+        console.log('Reorder started');
+
+        // Hide the icons when the reorder starts
+        icons.forEach((icon) => {
+          icon.style.opacity = 0;
+        });
+      });
+
+      reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
+        console.log('Dragged from index', detail.from, 'to', detail.to);
+
+        // Show the icons again
+        icons.forEach((icon) => {
+          icon.style.opacity = 1;
+        });
+
+        // Finish the reorder
+        detail.complete();
+      });
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/reorder/reorder-start-end-events/index.md b/static/usage/v8/reorder/reorder-start-end-events/index.md
new file mode 100644
index 00000000000..5e7d48127d1
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-start-end-events/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v8/reorder/reorder-start-end-events/demo.html"
+  size="300px"
+  showConsole={true}
+/>
diff --git a/static/usage/v8/reorder/reorder-start-end-events/javascript/index_html.md b/static/usage/v8/reorder/reorder-start-end-events/javascript/index_html.md
new file mode 100644
index 00000000000..a98397de9e1
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-start-end-events/javascript/index_html.md
@@ -0,0 +1,57 @@
+```html
+<ion-list>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group disabled="false">
+    <ion-item>
+      <ion-label>Buy groceries</ion-label>
+      <ion-icon name="warning" color="warning" slot="end"></ion-icon>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+    <ion-item>
+      <ion-label>Call the bank</ion-label>
+      <ion-icon name="warning" color="warning" slot="end"></ion-icon>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+    <ion-item>
+      <ion-label>Finish project report</ion-label>
+      <ion-icon name="ellipse" color="light" slot="end"></ion-icon>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+    <ion-item>
+      <ion-label>Book flight tickets</ion-label>
+      <ion-icon name="ellipse" color="light" slot="end"></ion-icon>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+    <ion-item>
+      <ion-label>Read a book</ion-label>
+      <ion-icon name="caret-down" color="secondary" slot="end"></ion-icon>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+  </ion-reorder-group>
+</ion-list>
+
+<script>
+  const reorderGroup = document.querySelector('ion-reorder-group');
+  const icons = document.querySelectorAll('ion-icon');
+  reorderGroup.addEventListener('ionReorderStart', ({ detail }) => {
+    console.log('Reorder started');
+
+    // Hide the icons when the reorder starts
+    icons.forEach((icon) => {
+      icon.style.opacity = 0;
+    });
+  });
+
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
+    console.log('Dragged from index', detail.from, 'to', detail.to);
+
+    // Show the icons again
+    icons.forEach((icon) => {
+      icon.style.opacity = 1;
+    });
+
+    // Finish the reorder
+    detail.complete();
+  });
+</script>
+```
diff --git a/static/usage/v8/reorder/reorder-start-end-events/javascript/index_ts.md b/static/usage/v8/reorder/reorder-start-end-events/javascript/index_ts.md
new file mode 100644
index 00000000000..c9e03106886
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-start-end-events/javascript/index_ts.md
@@ -0,0 +1,47 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { caretDown, ellipse, warning } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons get mapped
+ * to "caret-down", "ellipse", "warning" keys.
+ * Alternatively, developers can do:
+ * addIcons({ 'caret-down': caretDown,
+ * "ellipse": ellipse, "warning": warning });
+ */
+addIcons({ caretDown, ellipse, warning });
+
+defineCustomElements();
+```
diff --git a/static/usage/v8/reorder/reorder-start-end-events/react.md b/static/usage/v8/reorder/reorder-start-end-events/react.md
new file mode 100644
index 00000000000..c70462d5b32
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-start-end-events/react.md
@@ -0,0 +1,67 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
+import { caretDown, ellipse, warning } from 'ionicons/icons';
+
+interface TodoItem {
+  label: string;
+  icon: string;
+  color: string;
+}
+
+function Example() {
+  const [items, setItems] = useState<TodoItem[]>([
+    { label: 'Buy groceries', icon: warning, color: 'warning' },
+    { label: 'Call the bank', icon: warning, color: 'warning' },
+    { label: 'Finish project report', icon: ellipse, color: 'light' },
+    { label: 'Book flight tickets', icon: ellipse, color: 'light' },
+    { label: 'Read a book', icon: caretDown, color: 'secondary' },
+  ]);
+  const iconsRef = useRef<(HTMLIonIconElement | null)[]>([]);
+
+  function handleReorderStart() {
+    console.log('Reorder started');
+
+    // Hide the icons when the reorder starts
+    iconsRef.current.forEach((icon) => {
+      if (icon) icon.style.opacity = '0';
+    });
+  }
+
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Show the icons again
+    iconsRef.current.forEach((icon) => {
+      if (icon) icon.style.opacity = '1';
+    });
+
+    // Finish the reorder and update the items data
+    setItems(event.detail.complete(items));
+  }
+
+  return (
+    <IonList>
+      {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
+      <IonReorderGroup disabled={false} onIonReorderStart={handleReorderStart} onIonReorderEnd={handleReorderEnd}>
+        {items.map((item: TodoItem, i: number) => (
+          <IonItem key={item.label}>
+            <IonLabel>{item.label}</IonLabel>
+            <IonIcon
+              icon={item.icon}
+              color={item.color}
+              slot="end"
+              ref={(el) => {
+                iconsRef.current[i] = el;
+              }}
+            />
+            <IonReorder slot="end" />
+          </IonItem>
+        ))}
+      </IonReorderGroup>
+    </IonList>
+  );
+}
+
+export default Example;
+```
diff --git a/static/usage/v8/reorder/reorder-start-end-events/vue.md b/static/usage/v8/reorder/reorder-start-end-events/vue.md
new file mode 100644
index 00000000000..0648e09bddc
--- /dev/null
+++ b/static/usage/v8/reorder/reorder-start-end-events/vue.md
@@ -0,0 +1,59 @@
+```html
+<template>
+  <ion-list>
+    <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+    <ion-reorder-group :disabled="false" @ionReorderStart="handleReorderStart" @ionReorderEnd="handleReorderEnd">
+      <ion-item v-for="item in items" :key="item.label">
+        <ion-label>{{ item.label }}</ion-label>
+        <ion-icon :icon="item.icon" :color="item.color" slot="end" :ref="(el) => setIconRef(el, item.label)"></ion-icon>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+    </ion-reorder-group>
+  </ion-list>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/vue';
+  import { caretDown, ellipse, warning } from 'ionicons/icons';
+
+  const items = ref([
+    { label: 'Buy groceries', icon: warning, color: 'warning' },
+    { label: 'Call the bank', icon: warning, color: 'warning' },
+    { label: 'Finish project report', icon: ellipse, color: 'light' },
+    { label: 'Book flight tickets', icon: ellipse, color: 'light' },
+    { label: 'Read a book', icon: caretDown, color: 'secondary' },
+  ]);
+
+  const iconMap = ref(new Map<string, HTMLElement>());
+
+  function setIconRef(el: HTMLElement | null, label: string) {
+    if (el) {
+      iconMap.value.set(label, el);
+    } else {
+      iconMap.value.delete(label);
+    }
+  }
+
+  function handleReorderStart() {
+    console.log('Reorder started');
+
+    // Hide the icons when the reorder starts
+    iconMap.value.forEach((icon) => {
+      icon.$el.style.opacity = '0';
+    });
+  }
+
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
+
+    // Show the icons again
+    iconMap.value.forEach((icon) => {
+      icon.$el.style.opacity = '1';
+    });
+
+    // Finish the reorder and update the items data
+    items.value = event.detail.complete(items.value);
+  }
+</script>
+```
diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md
index aca04f1ee5a..dbfe175895b 100644
--- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md
+++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="isDisabled" (ionItemReorder)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="isDisabled" (ionReorderEnd)="handleReorderEnd($any($event))">
     <ion-item>
       <ion-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>
diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
index 496e59f15e1..1e1448b61a0 100644
--- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
@@ -1,13 +1,13 @@
 ```ts
 import { Component } from '@angular/core';
 import {
-  ItemReorderEventDetail,
   IonButton,
   IonItem,
   IonLabel,
   IonList,
   IonReorder,
   IonReorderGroup,
+  ReorderEndCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -19,14 +19,14 @@ import {
 export class ExampleComponent {
   public isDisabled = true;
 
-  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 
diff --git a/static/usage/v8/reorder/toggling-disabled/demo.html b/static/usage/v8/reorder/toggling-disabled/demo.html
index 46481ab3dc0..4b5dc99e6e8 100644
--- a/static/usage/v8/reorder/toggling-disabled/demo.html
+++ b/static/usage/v8/reorder/toggling-disabled/demo.html
@@ -16,7 +16,7 @@
       }
 
       ion-list {
-        width: 100%;
+        width: 300px;
       }
     </style>
   </head>
@@ -63,14 +63,14 @@
     <script>
       const reorderGroup = document.querySelector('ion-reorder-group');
 
-      reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', detail.from, 'to', detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         detail.complete();
       });
 
diff --git a/static/usage/v8/reorder/toggling-disabled/javascript.md b/static/usage/v8/reorder/toggling-disabled/javascript.md
index 90a9bc3d1d2..43d3fae03c8 100644
--- a/static/usage/v8/reorder/toggling-disabled/javascript.md
+++ b/static/usage/v8/reorder/toggling-disabled/javascript.md
@@ -34,14 +34,14 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', detail.from, 'to', detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     detail.complete();
   });
 
diff --git a/static/usage/v8/reorder/toggling-disabled/react.md b/static/usage/v8/reorder/toggling-disabled/react.md
index a231f782f5c..6b5aecaed2a 100644
--- a/static/usage/v8/reorder/toggling-disabled/react.md
+++ b/static/usage/v8/reorder/toggling-disabled/react.md
@@ -7,20 +7,20 @@ import {
   IonList,
   IonReorder,
   IonReorderGroup,
-  ItemReorderEventDetail,
+  ReorderEndCustomEvent,
 } from '@ionic/react';
 
 function Example() {
   const [isDisabled, setIsDisabled] = useState(true);
 
-  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 
@@ -31,7 +31,7 @@ function Example() {
   return (
     <>
       <IonList>
-        <IonReorderGroup disabled={isDisabled} onIonItemReorder={handleReorder}>
+        <IonReorderGroup disabled={isDisabled} onIonReorderEnd={handleReorderEnd}>
           <IonItem>
             <IonLabel>Item 1</IonLabel>
             <IonReorder slot="end"></IonReorder>
diff --git a/static/usage/v8/reorder/toggling-disabled/vue.md b/static/usage/v8/reorder/toggling-disabled/vue.md
index c649c0ebe36..4fd650715a8 100644
--- a/static/usage/v8/reorder/toggling-disabled/vue.md
+++ b/static/usage/v8/reorder/toggling-disabled/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-list>
-    <ion-reorder-group :disabled="isDisabled" @ionItemReorder="handleReorder($event)">
+    <ion-reorder-group :disabled="isDisabled" @ionReorderEnd="handleReorderEnd($event)">
       <ion-item>
         <ion-label> Item 1 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
@@ -34,7 +34,15 @@
 </template>
 
 <script lang="ts">
-  import { IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import {
+    IonButton,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonReorder,
+    IonReorderGroup,
+    ReorderEndCustomEvent,
+  } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
   export default defineComponent({
@@ -42,14 +50,14 @@
     setup() {
       let isDisabled = ref(true);
 
-      const handleReorder = (event: CustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         event.detail.complete();
       };
 
@@ -57,7 +65,7 @@
         isDisabled.value = !isDisabled.value;
       };
 
-      return { isDisabled, handleReorder, toggleReorder };
+      return { isDisabled, handleReorderEnd, toggleReorder };
     },
   });
 </script>
diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_html.md b/static/usage/v8/reorder/updating-data/angular/example_component_html.md
index 873daed0e90..6326a17c949 100644
--- a/static/usage/v8/reorder/updating-data/angular/example_component_html.md
+++ b/static/usage/v8/reorder/updating-data/angular/example_component_html.md
@@ -2,7 +2,7 @@
 <ion-list>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
     @for (item of items; track item) {
     <ion-item>
       <ion-label> Item {{ item }} </ion-label>
diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
index f70f2bed206..d476b6fdfa0 100644
--- a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
@@ -1,12 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
 import {
-  ItemReorderEventDetail,
   IonItem,
   IonLabel,
   IonList,
   IonReorder,
   IonReorderGroup,
+  ReorderEndCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -18,7 +18,7 @@ import {
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
 
-  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // Before complete is called with the items they will remain in the
     // order before the drag
     console.log('Before complete', this.items);
diff --git a/static/usage/v8/reorder/updating-data/demo.html b/static/usage/v8/reorder/updating-data/demo.html
index 8f0ca1b7cda..a01deb9600c 100644
--- a/static/usage/v8/reorder/updating-data/demo.html
+++ b/static/usage/v8/reorder/updating-data/demo.html
@@ -11,7 +11,7 @@
 
     <style>
       ion-list {
-        width: 100%;
+        width: 300px;
       }
     </style>
   </head>
@@ -34,7 +34,7 @@
       let items = [1, 2, 3, 4, 5];
       reorderItems(items);
 
-      reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
         // Before complete is called with the items they will remain in the
         // order before the drag
         console.log('Before complete', items);
diff --git a/static/usage/v8/reorder/updating-data/javascript.md b/static/usage/v8/reorder/updating-data/javascript.md
index 901bf08a970..28ef0989eea 100644
--- a/static/usage/v8/reorder/updating-data/javascript.md
+++ b/static/usage/v8/reorder/updating-data/javascript.md
@@ -10,7 +10,7 @@
   let items = [1, 2, 3, 4, 5];
   reorderItems(items);
 
-  reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
     // Before complete is called with the items they will remain in the
     // order before the drag
     console.log('Before complete', items);
diff --git a/static/usage/v8/reorder/updating-data/react.md b/static/usage/v8/reorder/updating-data/react.md
index acbf422d017..36b9049e56a 100644
--- a/static/usage/v8/reorder/updating-data/react.md
+++ b/static/usage/v8/reorder/updating-data/react.md
@@ -1,11 +1,11 @@
 ```tsx
 import React, { useState } from 'react';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
 
 function Example() {
   const [items, setItems] = useState([1, 2, 3, 4, 5]);
 
-  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // Before complete is called with the items they will remain in the
     // order before the drag
     console.log('Before complete', items);
@@ -22,7 +22,7 @@ function Example() {
   return (
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
         {items.map((item) => (
           <IonItem key={item}>
             <IonLabel>Item {item}</IonLabel>
diff --git a/static/usage/v8/reorder/updating-data/vue.md b/static/usage/v8/reorder/updating-data/vue.md
index 024caf38347..188df041bc2 100644
--- a/static/usage/v8/reorder/updating-data/vue.md
+++ b/static/usage/v8/reorder/updating-data/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-    <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
       <ion-item v-for="item in items" :key="item">
         <ion-label> Item {{ item }} </ion-label>
         <ion-reorder slot="end"></ion-reorder>
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/vue';
   import { defineComponent, ref } from 'vue';
 
   export default defineComponent({
@@ -20,7 +20,7 @@
     setup() {
       const items = ref([1, 2, 3, 4, 5]);
 
-      const handleReorder = (event: CustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // Before complete is called with the items they will remain in the
         // order before the drag
         console.log('Before complete', items.value);
@@ -33,7 +33,7 @@
         // After complete is called the items will be in the new order
         console.log('After complete', items.value);
       };
-      return { handleReorder, items };
+      return { handleReorderEnd, items };
     },
   });
 </script>
diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_html.md b/static/usage/v8/reorder/wrapper/angular/example_component_html.md
index cf856309098..5abb818e8b3 100644
--- a/static/usage/v8/reorder/wrapper/angular/example_component_html.md
+++ b/static/usage/v8/reorder/wrapper/angular/example_component_html.md
@@ -2,7 +2,7 @@
 <ion-list>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
     <ion-reorder>
       <ion-item>
         <ion-label> Item 1 </ion-label>
diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
index 541fd9c6df3..5553891178a 100644
--- a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
@@ -1,12 +1,12 @@
 ```ts
 import { Component } from '@angular/core';
 import {
-  ItemReorderEventDetail,
   IonItem,
   IonLabel,
   IonList,
   IonReorder,
   IonReorderGroup,
+  ReorderEndCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,14 +16,14 @@ import {
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 }
diff --git a/static/usage/v8/reorder/wrapper/demo.html b/static/usage/v8/reorder/wrapper/demo.html
index 1322a6ee6fd..e4520630556 100644
--- a/static/usage/v8/reorder/wrapper/demo.html
+++ b/static/usage/v8/reorder/wrapper/demo.html
@@ -11,7 +11,7 @@
 
     <style>
       ion-list {
-        width: 100%;
+        width: 300px;
       }
     </style>
   </head>
@@ -61,14 +61,14 @@
     <script>
       const reorderGroup = document.querySelector('ion-reorder-group');
 
-      reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+      reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', detail.from, 'to', detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         detail.complete();
       });
     </script>
diff --git a/static/usage/v8/reorder/wrapper/javascript.md b/static/usage/v8/reorder/wrapper/javascript.md
index e4e024ee2d4..3cd52cb1e8c 100644
--- a/static/usage/v8/reorder/wrapper/javascript.md
+++ b/static/usage/v8/reorder/wrapper/javascript.md
@@ -37,14 +37,14 @@
 <script>
   const reorderGroup = document.querySelector('ion-reorder-group');
 
-  reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', detail.from, 'to', detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     detail.complete();
   });
 </script>
diff --git a/static/usage/v8/reorder/wrapper/react.md b/static/usage/v8/reorder/wrapper/react.md
index f70ba499316..50210964586 100644
--- a/static/usage/v8/reorder/wrapper/react.md
+++ b/static/usage/v8/reorder/wrapper/react.md
@@ -1,23 +1,23 @@
 ```tsx
 import React from 'react';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
 
 function Example() {
-  function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
-    // by the reorder group
+    // by the reorder group.
     event.detail.complete();
   }
 
   return (
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
         <IonReorder>
           <IonItem>
             <IonLabel>Item 1</IonLabel>
diff --git a/static/usage/v8/reorder/wrapper/vue.md b/static/usage/v8/reorder/wrapper/vue.md
index fd157186093..1b114e575de 100644
--- a/static/usage/v8/reorder/wrapper/vue.md
+++ b/static/usage/v8/reorder/wrapper/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-    <ion-reorder-group :disabled="false" @ionItemReorder="handleReorder($event)">
+    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
       <ion-reorder>
         <ion-item>
           <ion-label> Item 1 </ion-label>
@@ -37,24 +37,24 @@
 </template>
 
 <script lang="ts">
-  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup } from '@ionic/vue';
+  import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
     setup() {
-      const handleReorder = (event: CustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
         // Finish the reorder and position the item in the DOM based on
         // where the gesture ended. This method can also be called directly
-        // by the reorder group
+        // by the reorder group.
         event.detail.complete();
       };
 
-      return { handleReorder };
+      return { handleReorderEnd };
     },
   });
 </script>