import Props from '@ionic-internal/component-api/v8/reorder-group/props.md'; import Events from '@ionic-internal/component-api/v8/reorder-group/events.md'; import Methods from '@ionic-internal/component-api/v8/reorder-group/methods.md'; import Parts from '@ionic-internal/component-api/v8/reorder-group/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/reorder-group/custom-props.mdx'; 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 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 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 documentation.

interface ReorderMoveEventDetail {
  from: number;
  to: number;
}

interface ReorderEndEventDetail {
  from: number;
  to: number;
  complete: (data?: boolean | any[]) => any;
}

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface ReorderMoveCustomEvent extends CustomEvent {
  detail: ReorderMoveEventDetail;
  target: HTMLIonReorderGroupElement;
}

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface ReorderEndCustomEvent extends CustomEvent {
  detail: ReorderEndEventDetail;
  target: HTMLIonReorderGroupElement;
}

Deprecated — Use the ionReorderEnd event with ReorderEndEventDetail instead.

interface ItemReorderEventDetail {
  from: number;
  to: number;
  complete: (data?: boolean | any[]) => any;
}

Deprecated — Use the ionReorderEnd event with ReorderEndCustomEvent instead.

interface ItemReorderCustomEvent extends CustomEvent {
  detail: ItemReorderEventDetail;
  target: HTMLIonReorderGroupElement;
}