> For the complete documentation index, see [llms.txt](https://enappd.gitbook.io/capacitor-full-app-ionic-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd.gitbook.io/capacitor-full-app-ionic-angular/features/startup-features/addons/list-re-ordering.md).
# List Re-ordering
Easily create lists with drag-and-drop functionality to reorders items
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.
```
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
```
Item {{ item }}
```
#### 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.
```
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
```
```
We can also make the whole `ion-item` draggable, by containing it inside the `ion-reorder` tag, like so
```
Item {{ item }}
```
