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 in a new position, the ionItemReorder 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 documentation.

interface ItemReorderEventDetail {
  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 ItemReorderCustomEvent extends CustomEvent {
  detail: ItemReorderEventDetail;
  target: HTMLIonReorderGroupElement;
}