Ionic 4 | Ion Reorder List/ Drag & Drop Sorting List in Ionic 4 using ion-reorder Component

In this post, we will discuss Ionic’s Reorder component. IonReorder component adds Drag and Drop feature to list items using which user can change the order of items. Such sorting or reorder functionality is found in many places like Song Ques, Todo list items etc.

Using Ion Reorder we can add an awesome visual list drag and drop interface adding more ease in user interaction with the app.

Here we will discuss How to Implement Ion Reorder Component in Ionic 4 Application to allowing items to be drag and drop to change the order in the list. We will also update the order of array items in actual by calling the complete() method.

Add Reorder we will add ion-reorder-group component with a list of items having an iteration of items array listItems using Angular’s *ngFor 

Drag and Drop will only be enabled after we add a disabled property set to true. After list item is dropped a callback method is called from (ionItemReorder) event listener for ion-reorder-group

Now we will add methods getList() to console Item lists and onRenderItems($event) to sort the actual listItems array by getting from and to the index of item dragged.

That’s it your sortable item list is ready to rock. You can follow these simple steps to create an awesome Ionic Reorder list.

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Helmar Bachle Recent comment authors
newest oldest most voted
Notify of
Helmar Bachle

Hi there, great tutorial however I get the following error message:
– unkonwn method on renderItems
– Identifier listItems is not defined
– unknown method get list

can you advise please