ion-item-move (altering items while re-ordering)

angular/src/directives/proxies.ts

@@ -1780,12 +1780,13 @@ export class IonReorderGroup {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionItemReorder']);
+    proxyOutputs(this, this.el, ['ionItemReorder', 'ionItemMove']);
   }
 }
 
 
 import type { ItemReorderEventDetail as IIonReorderGroupItemReorderEventDetail } from '@ionic/core';
+import type { ItemMoveEventDetail as IIonReorderGroupItemMoveEventDetail } from '@ionic/core';
 
 export declare interface IonReorderGroup extends Components.IonReorderGroup {
   /**
@@ -1794,6 +1795,8 @@ Once the event has been emitted, the `complete()` method then needs
 to be called in order to finalize the reorder action.
    */
   ionItemReorder: EventEmitter<CustomEvent<IIonReorderGroupItemReorderEventDetail>>;
+
+  ionItemMove: EventEmitter<CustomEvent<IIonReorderGroupItemMoveEventDetail>>;
 }
 
 

core/api.txt

@@ -1092,6 +1092,7 @@ ion-reorder,part,icon
 ion-reorder-group,none
 ion-reorder-group,prop,disabled,boolean,true,false,false
 ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[]) => Promise<any>
+ion-reorder-group,event,ionItemMove,ItemMoveEventDetail,true
 ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true
 
 ion-ripple-effect,shadow

core/src/components.d.ts

@@ -30,7 +30,7 @@ import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct
 import { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 import { RefresherEventDetail } from "./components/refresher/refresher-interface";
-import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
+import { ItemMoveEventDetail, ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
 import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 import { SegmentChangeEventDetail } from "./components/segment/segment-interface";
@@ -66,7 +66,7 @@ export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct
 export { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 export { RefresherEventDetail } from "./components/refresher/refresher-interface";
-export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
+export { ItemMoveEventDetail, ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
 export { NavigationHookCallback } from "./components/route/route-interface";
 export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 export { SegmentChangeEventDetail } from "./components/segment/segment-interface";
@@ -6444,6 +6444,7 @@ declare namespace LocalJSX {
           * If `true`, the reorder will be hidden.
          */
         "disabled"?: boolean;
+        "onIonItemMove"?: (event: IonReorderGroupCustomEvent<ItemMoveEventDetail>) => void;
         /**
           * Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
          */

core/src/components/reorder-group/reorder-group-interface.ts

@@ -4,7 +4,18 @@ export interface ItemReorderEventDetail {
   complete: (data?: boolean | any[]) => any;
 }
 
+export interface ItemMoveEventDetail {
+  from: number;
+  lastTo: number;
+  to: number;
+}
+
 export interface ItemReorderCustomEvent extends CustomEvent {
   detail: ItemReorderEventDetail;
   target: HTMLIonReorderGroupElement;
 }
+
+export interface ItemMoveCustomEvent extends CustomEvent {
+  detail: ItemReorderEventDetail;
+  target: HTMLIonReorderGroupElement;
+}

core/src/components/reorder-group/reorder-group.tsx

@@ -7,7 +7,7 @@ import { findClosestIonContent, getScrollElement } from '../../utils/content';
 import { raf } from '../../utils/helpers';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
 
-import type { ItemReorderEventDetail } from './reorder-group-interface';
+import type { ItemReorderEventDetail, ItemMoveEventDetail } from './reorder-group-interface';
 
 // TODO(FW-2832): types
 
@@ -58,6 +58,8 @@ export class ReorderGroup implements ComponentInterface {
    */
   @Event() ionItemReorder!: EventEmitter<ItemReorderEventDetail>;
 
+  @Event() ionItemMove!: EventEmitter<ItemMoveEventDetail>;
+
   async connectedCallback() {
     const contentEl = findClosestIonContent(this.el);
     if (contentEl) {
@@ -183,6 +185,13 @@ export class ReorderGroup implements ComponentInterface {
     const toIndex = this.itemIndexForTop(normalizedY);
     if (toIndex !== this.lastToIndex) {
       const fromIndex = indexForItem(selectedItem);
+
+      this.ionItemMove.emit({
+        from: fromIndex,
+        lastTo: this.lastToIndex,
+        to: toIndex,
+      });
+
       this.lastToIndex = toIndex;
 
       hapticSelectionChanged();

core/src/interface.d.ts

@@ -24,7 +24,7 @@ export { RadioGroupCustomEvent } from './components/radio-group/radio-group-inte
 export { RangeCustomEvent, PinFormatter } from './components/range/range-interface';
 export { HTMLStencilElement, RouterCustomEvent } from './components/router/utils/interface';
 export { RefresherCustomEvent } from './components/refresher/refresher-interface';
-export { ItemReorderCustomEvent } from './components/reorder-group/reorder-group-interface';
+export { ItemMoveEventDetail, ItemReorderCustomEvent } from './components/reorder-group/reorder-group-interface';
 export { SearchbarCustomEvent } from './components/searchbar/searchbar-interface';
 export { SegmentCustomEvent } from './components/segment/segment-interface';
 export { SelectCustomEvent, SelectCompareFn } from './components/select/select-interface';

packages/vue/src/proxies.ts

@@ -656,7 +656,8 @@ export const IonReorder = /*@__PURE__*/ defineContainer<JSX.IonReorder>('ion-reo
 
 export const IonReorderGroup = /*@__PURE__*/ defineContainer<JSX.IonReorderGroup>('ion-reorder-group', defineIonReorderGroup, [
   'disabled',
-  'ionItemReorder'
+  'ionItemReorder',
+  'ionItemMove'
 ]);