Implementing Reorder Lists

1. Using IonReorderGroup Component

Property	Values	Description
disabled	`false`	Disables reordering if set to `true`.
ionItem	`boolean`	Enables reorder behavior for items within the group.

Example: Basic Reorder Group

<ion-reorder-group disabled="false">
  <ion-item>
    <ion-reorder slot="end">Drag</ion-reorder>
    <ion-label>Item 1</ion-label>
  </ion-item>
  <ion-item>
    <ion-reorder slot="end">Drag</ion-reorder>
    <ion-label>Item 2</ion-label>
  </ion-item>
</ion-reorder-group>

Note: The ion-reorder component must be placed inside each item that should be reordered.

Warning: Ensure all items within IonReorderGroup have a slot="end" for the reorder handle.

2. Creating Reorder Items

Property	Description	Values
reorder	Enables or disables reordering for an item	`true` \| `false`
reorderGroup	Groups items for reordering within the same group	`string`

Example: Basic Reorder Item

<ion-item reorder="true">
  <ion-label>Item 1</ion-label>
</ion-item>

Example: Reorder Group

<ion-reorder-group disabled="false">
  <ion-item reorder="true" reorder-group="my-group">
    <ion-label>Item 1</ion-label>
  <ion-item>
  <ion-item reorder="true" reorder-group="my-group">
    <ion-label>Item 2</ion-label>
  </ion-item>
</ion-reorder-group>

3. Handling Reorder Event

Property	Description	Values
ionItemReorder	Event emitted when reorder is triggered	`Event`

Example: Handling Reorder Event

handleReorder = (ev: CustomEvent) => {
  console.log("Reorder event triggered", ev);
  // Handle reorder logic here
}

Note: The ionItemReorder event is fired when the reorder action is completed.

4. Completing Reorder

Property	Description	Values
ion-reorder-group	Container for reorderable items	`<ion-reorder-group>`
ion-reorder	Reorder handle element	`<ion-reorder>`
complete	Callback when reorder is completed	`(event: IonReorderEvent) => void`

Example: Reorder Completion Handler

import &#123; IonReorderEvent &#125; from '@ionic/angular';

handleReorder(event: IonReorderEvent) &#123;
  const items = event.detail.items;
  console.log('Reordered items:', items);
  // Update data source with new order
&#125;

Note: The complete event is fired when the reorder operation is finished and items have been reordered in the DOM.

5. Disabling Reorder

Property	Values	Description
reorder	`false`	Disables the reorder functionality on the list item.

Example: Disabling Reorder

<ion-item reorder="false">
  <ion-label>Item with reorder disabled</ion-label>
</ion-item>

6. Styling Reorder Icon

Property	Values	Description
--reorder-icon-color	`#000`	Color of the reorder icon
--reorder-icon-size	`24px`	Size of the reorder icon
--reorder-icon-opacity	`0.5`	Opacity of the reorder icon

Example: Customizing Reorder Icon

.reorder-icon {
  --reorder-icon-color: #ff5722;
  --reorder-icon-size: 30px;
  --reorder-icon-opacity: 0.8;
}

7. Using Reorder with Lists

Property	Description	Values	Notes
reorder	Enables or disables reordering	`true` \| `false`	Default is `false`
reorderEnabled	Controls whether reorder is active	`true` \| `false`	Can be toggled dynamically

Example: Reorderable List

<ion-list reorder="true">
  <ion-item *ngFor="let item of items" reorder="true">
    <ion-label>{{ item.name }}</ion-label>
  </ion-item>
</ion-list>

Example: Handle Reorder Event

onReorder(ev: any) {
  const item = ev.detail;
  console.log("Item reordered to index:", item.to);
}

Note: The reorder property must be set on both the list and individual items to enable reordering.

Warning: Reordering is only supported in Ionic Framework v6+.

8. Implementing Drag Handle

Property	Description	Values
ion-reorder	Element to make reorderable	`<ion-reorder>`
ion-reorder-group	Container for reorderable items	`<ion-reorder-group>`
reorder	Event emitted when reorder occurs	`ionItemReorder`

Example: Reorderable List with Drag Handle

<ion-reorder-group>
  <ion-item>
    <ion-reorder slot="start"></ion-reorder>
    <ion-label>Item 1</ion-label>
  </ion-item>
  <ion-item>
    <ion-reorder slot="start"></ion-reorder>
    <ion-label>Item 2</ion-label>
  </ion-item>
</ion-reorder-group>

Note: The slot="start" attribute on <ion-reorder> places the drag handle on the left side of the item.

Example: Reordering with Event Handling

handleReorder(ev) {
  const item = ev.detail;
  console.log('Reordered items:', item);
}

9. Managing Reordered Data

Property	Description	Usage
ion-reorder-group	Container for reorderable items	`<ion-reorder-group>...</ion-reorder-group>`
ion-reorder	Reorder handle for each item	`<ion-reorder></ion-reorder>`
reorderEvent.detail.from	Index of item before reorder	`console.log(reorderEvent.detail.from);`
reorderEvent.detail.to	Index of item after reorder	`console.log(reorderEvent.detail.to);`

Example: Reordering Data in Array

const reorderArray = (array, fromIndex, toIndex) => {
  const newArray = [...array];
  const [reorderedItem] = newArray.splice(fromIndex, 1);
  newArray.splice(toIndex, 0, reorderedItem);
  return newArray;
};

Note: The ion-reorder-group emits a ionItemReorder event with detail.from and detail.to indices when items are reordered.

Example: Updating State in React

const handleReorder = (event) => {
  const { from, to } = event.detail;
  const updatedItems = reorderArray(items, from, to);
  setItems(updatedItems);
};

10. Using Reorder with Virtual Scroll

Property	Description	Values	Notes
ion-reorder-group	Container for reorderable items	`<ion-reorder-group>`	Must wrap reorderable items
ion-reorder	Reorder handle element	`<ion-reorder>`	Must be inside `ion-reorder-group`
virtualScroll	Enables virtual scrolling	`true` / `false`	Improves performance for large lists

Example: Reorder with Virtual Scroll

import { Component, ViewChild } from '@angular/core';
import { IonVirtualScroll } from '@ionic/angular';

@Component({
  selector: 'app-reorder-virtual-scroll',
  template: `
    <ion-content>
      <ion-reorder-group (ionItemReorder)="reorderItems($event)">
        <ion-item *virtualScroll="let item of items">
          <ion-reorder slot="end">
            <ion-icon name="reorder"></ion-icon>
          </ion-reorder>
          <ion-label>{{ item.name }}</ion-label>
        </ion-item>
      </ion-reorder-group>
    </ion-content>
  `
})
export class ReorderVirtualScrollComponent {
  items = Array.from({ length: 1000 }, (_, i) => ({
    name: `Item ${i + 1}`
  }));

  reorderItems(event: any) {
    const items = this.items;
    const fromIndex = event.detail.from;
    const toIndex = event.detail.to;

    const itemToMove = items[fromIndex];
    items.splice(fromIndex, 1);
    items.splice(toIndex, 0, itemToMove);

    event.detail.complete();
  }
}

Note: Virtual scrolling is essential for performance when dealing with large lists in reorderable components.

Warning: Ensure ion-reorder-group is properly configured to handle reordering with virtual scroll.