1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72---
title: 'ion-reorder-group'
---
import Props from '@ionic-internal/component-api/v7/reorder-group/props.md';
import Events from '@ionic-internal/component-api/v7/reorder-group/events.md';
import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.md';
import Parts from '@ionic-internal/component-api/v7/reorder-group/parts.md';
import CustomProps from '@ionic-internal/component-api/v7/reorder-group/custom-props.mdx';
import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md';
<head>
<title>ion-reorder-group: Wrapper Component for Reorder Items</title>
<meta
name="description"
content="ion-reorder-group is a wrapper component for items using the ion-reorder component on Ionic apps. Read to learn more about ion-reorder-group usage."
/>
</head>
import EncapsulationPill from '@components/page/api/EncapsulationPill';
The reorder group is a container for items using the [reorder](./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](./reorder) documentation.
## Interfaces
### ItemReorderEventDetail
```typescript
interface ItemReorderEventDetail {
from: number;
to: number;
complete: (data?: boolean | any[]) => any;
}
```
### ItemReorderCustomEvent
While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
```typescript
interface ItemReorderCustomEvent extends CustomEvent {
detail: ItemReorderEventDetail;
target: HTMLIonReorderGroupElement;
}
```
## Properties
<Props />
## Events
<Events />
## Methods
<Methods />
## CSS Shadow Parts
<Parts />
## CSS Custom Properties
<CustomProps />
## Slots
<Slots />