diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts index 6128c29661..af31973468 100644 --- a/src/components/item/item-reorder.ts +++ b/src/components/item/item-reorder.ts @@ -4,12 +4,13 @@ import { Content } from '../content/content'; import { CSS, zoneRafFrames } from '../../util/dom'; import { Item } from './item'; import { ItemReorderGesture } from '../item/item-reorder-gesture'; -import { isTrueProperty } from '../../util/util'; +import { isTrueProperty, reorderArray } from '../../util/util'; export interface ReorderIndexes { from: number; to: number; + applyTo: Function; } /** @@ -118,6 +119,16 @@ export interface ReorderIndexes { * } * } * ``` + * Alternatevely you can execute helper function inside template: + * + * ```html + * + * Header + * + * {% raw %}{{ item }}{% endraw %} + * + * + * ``` * * @demo /docs/v2/demos/src/item-reorder/ * @see {@link /docs/v2/components#lists List Component Docs} @@ -205,10 +216,10 @@ export class ItemReorder { this._reorderReset(); if (fromIndex !== toIndex) { this._zone.run(() => { - this.ionItemReorder.emit({ - from: fromIndex, - to: toIndex, - }); + const indexes = { from: fromIndex, to: toIndex }; + this.ionItemReorder.emit(Object.assign({ + applyTo: (array) => reorderArray(array, indexes) + }, indexes)); }); } } @@ -341,4 +352,3 @@ export function indexForItem(element: any): number { export function reorderListForItem(element: any): any { return element['$ionReorderList']; } - diff --git a/src/components/item/test/reorder/main.html b/src/components/item/test/reorder/main.html index 0148f37c7a..605da572db 100644 --- a/src/components/item/test/reorder/main.html +++ b/src/components/item/test/reorder/main.html @@ -19,7 +19,7 @@ - +