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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105---
title: 'ion-reorder'
---
import Props from '@ionic-internal/component-api/v7/reorder/props.md';
import Events from '@ionic-internal/component-api/v7/reorder/events.md';
import Methods from '@ionic-internal/component-api/v7/reorder/methods.md';
import Parts from '@ionic-internal/component-api/v7/reorder/parts.md';
import CustomProps from '@ionic-internal/component-api/v7/reorder/custom-props.mdx';
import Slots from '@ionic-internal/component-api/v7/reorder/slots.md';
<head>
<title>ion-reorder: Drag and Drop Icon to Reorder Items</title>
<meta
name="description"
content="Ion-reorder is the anchor used to drag and drop the items inside of the ion-reorder-group. Read to learn more about custom reorder icons and items."
/>
</head>
import EncapsulationPill from '@components/page/api/EncapsulationPill';
<EncapsulationPill type="shadow" />
Reorder is a component that allows an item to be dragged to change its order within a group of items. It must be used within a [reorder group](./reorder-group) to provide a visual drag and drop interface.
The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionItemReorder` event will be dispatched from the reorder group and the `complete` method needs to be called.
## Basic Usage
The most basic example of a reorder is slotting it inside of an item. By default, the reorder functionality is disabled for a reorder group. It can be enabled by setting the `disabled` property on the reorder group to `false`. The reorder icon can then be used to drag and drop the items and reorder them.
import Basic from '@site/static/usage/v7/reorder/basic/index.md';
<Basic />
## Toggling Reorder
In some cases, it may be desired to have the option to toggle the reorder functionality. This can be done by making the `disabled` property reactive, based on a function or variable.
import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/index.md';
<TogglingDisabled />
## Custom Reorder Icon
The reorder component uses a reorder icon with three lines on iOS and two lines on Material Design. This can be customized by adding an [Icon](https://ionic.io/ionicons) component inside of the reorder with any of the available Ionicons.
import CustomIcon from '@site/static/usage/v7/reorder/custom-icon/index.md';
<CustomIcon />
## Reorder Wrapper
Reorder can also be used as a wrapper around an item, making the item itself the anchor. Click anywhere on an item below and drag it to reorder the list.
import Wrapper from '@site/static/usage/v7/reorder/wrapper/index.md';
<Wrapper />
## Updating Data
When the `complete` method is called on the reorder group with no parameters, the DOM nodes will be reordered. If the items are rendered from an array of data that needs to be sorted, this can result in the data and DOM being out of sync.
In order to sort the array upon completion of the reorder, the array should be passed as a parameter to the `complete` method. The `complete` method will sort the array and return it so it can be reassigned. Note that passing the array will prevent Ionic from reordering the DOM nodes.
In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group.
Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `track` for Angular, and `key` for React and Vue.
import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md';
<UpdatingData />
## Usage with Virtual Scroll
Reorder requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling.
import CustomScrollTarget from '@site/static/usage/v7/reorder/custom-scroll-target/index.md';
<CustomScrollTarget />
## Properties
<Props />
## Events
<Events />
## Methods
<Methods />
## CSS Shadow Parts
<Parts />
## CSS Custom Properties
<CustomProps />
## Slots
<Slots />