docs(reorder): update event handling descriptions and add logs

Author: brandyscarney

docs/api/reorder.md

@@ -77,12 +77,22 @@ import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';
 
 ### 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 by removing their pointer from the screen. 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 ReorderStartEnd from '@site/static/usage/v8/reorder/reorder-start-end/index.md';
 
 <ReorderStartEnd />
 
 ### 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 ReorderMove from '@site/static/usage/v8/reorder/reorder-move/index.md';
 
 <ReorderMove />

static/usage/v8/reorder/reorder-move/angular/example_component_ts.md

@@ -23,6 +23,10 @@ export class ExampleComponent {
     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);

static/usage/v8/reorder/reorder-move/demo.html

@@ -46,6 +46,10 @@
         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);

static/usage/v8/reorder/reorder-move/index.md

@@ -22,4 +22,5 @@ import angular_example_component_html from './angular/example_component_html.md'
   }}
   src="usage/v8/reorder/reorder-move/demo.html"
   size="300px"
+  showConsole={true}
 />

static/usage/v8/reorder/reorder-move/javascript.md

@@ -14,6 +14,10 @@
     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);

static/usage/v8/reorder/reorder-move/react.md

@@ -23,6 +23,10 @@ function Example() {
     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);

static/usage/v8/reorder/reorder-move/vue.md

@@ -22,6 +22,10 @@
     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);

static/usage/v8/reorder/reorder-start-end/angular/example_component_ts.md

@@ -39,13 +39,17 @@ export class ExampleComponent {
   }
 
   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';

static/usage/v8/reorder/reorder-start-end/demo.html

@@ -63,14 +63,18 @@
     <script>
       const reorderGroup = document.querySelector('ion-reorder-group');
       const icons = document.querySelectorAll('ion-icon');
-      reorderGroup.addEventListener('ionReorderStart', ({ detail }) => {
+      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;

static/usage/v8/reorder/reorder-start-end/index.md

@@ -29,4 +29,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   }}
   src="usage/v8/reorder/reorder-start-end/demo.html"
   size="300px"
+  showConsole={true}
 />