---
description: Easily create lists with drag-and-drop functionality to reorders items
---

# List re-ordering

Ionic has long awaited a standard drag-n-drop functionality for list items. `ion-reorder` is Ionic's standard tag to include in an `ion-item` to make it draggable to reorder. This `ion-item` should be contained within an `ion-reorder-group` to function properly.

```
<ion-item>
  <ion-label>
    Item
  </ion-label>
  <ion-reorder slot="end"></ion-reorder>
</ion-item>
```

In Full App, list re-ordering in located in `src/app/pages/addons/reorder`

Following is the sample code for a re-order enabled, drag-n-drop capable item list

```
<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
  <ion-item *ngFor="let item of items">
    <ion-label>Item {{ item }}</ion-label>
    <ion-reorder slot="end"></ion-reorder>
  </ion-item>
</ion-reorder-group>
```

#### Completion event

`(ionItemReorder)="reorderItems($event)"` is the declaration of `ionItemReorder`listener attached to the reorder group. When this listener is fired, you can call a function like `reorderItems`which contains the logic of reordering.&#x20;

```
 reorderItems(ev) {
    const element = this.items[ev.detail.from];
    this.items.splice(ev.detail.from, 1);
    this.items.splice(ev.detail.to, 0, element);
    ev.detail.complete();
  }
```

`ev.detail.complete();` , where `ev` is the drop event, marks the completion of your reorder logic, and at this moment, you will display the modified list to the user.

#### Custom Drag Handles

In the above example, we used a default drag-handle.

We can use a **custom drag-handle icons** by defining the content inside `ion-reorder` tag

```
<ion-reorder slot="start">
   <ion-icon name="nuclear"></ion-icon>
</ion-reorder>
```

We can also make the whole `ion-item` draggable, by containing it inside the `ion-reorder` tag, like so

```
<ion-reorder *ngFor="let item of items3">
  <ion-item >
    <ion-label>Item {{ item }}</ion-label>
  </ion-item>
</ion-reorder>
```

![Different drag handles](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LakkQZ2QdYMbcXKlpcB%2F-LakkSimVHbC45Nl3Vuu%2FScreen%20Shot%202019-03-24%20at%2011.01.14%20PM.png?alt=media\&token=c1fc735f-b2ee-4bce-8bde-4a218895366e)
