Creating sortable lists with Ionic

June 9, 2018, 1:15 pm Categories:

Categories

Ionic's prebuilt components make simple work of implementing lists within our mobile apps - especially when it comes to sorting options displayed within those lists.

This is where the ItemReorder API shines by providing a simple drag and drop event model to allow items grouped within the same list to be easily sorted.

What we'll be developing

Using the ItemReorder API we'll create a basic Ionic application that allows a pre-built list of web technologies to be easily sorted as demonstrated in the following animation:

GIF animation displaying list items being reordered through mouse drag and drop

Getting started

Fire up your Ionic CLI and create a new project with the following command:

ionic start ionic-reorder blank

We won't be installing any plugins or platforms (so simply enter the letter N when prompted by the Ionic CLI for Cordova integration) as the ItemReorder API is baked into Ionic by default.

This makes our job as developers easier which, let's face it, is no bad thing!

Our component logic

Jumping straight into the coding for the ionic-reorder/src/pages/home/home.ts component class then we're simply going to implement the following:

  • A pre-configured array of web technologies which will be used to dynamically generate our list within the view template
  • A reorderItems method which will use the reorderArray method of the ItemReorder API to handle the reordering of the dragged and drop items within the list

Open the ionic-reorder/src/pages/home/home.ts component class and structure your code as follows:

import { Component } from '@angular/core';
import { NavController, reorderArray } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {



  /**
    * @name items
    * @type Array
    * @public
    * @description              Stores the list of technologies to be displayed in the template view
    */
   public items : Array = ['Angular', 
                           'TypeScript', 
                           'Sass', 
                           'HTML5', 
                           'Apache Cordova', 
                           'StencilJS', 
                           'Capacitor'];




  constructor(public navCtrl: NavController) 
  {  }




  /**
    * @public
    * @method reorderItems
    * @param indexes  {any}     	The index of the items in the sorted list that we are capturing 
    * @description    			    Captures the index of sorted items from the view after reordering
    * 							
    * @return {None}
    */
   reorderItems(indexes : any) : void
  {
     // Update the array to reflect the reordered indexes of the list items
     this.items = reorderArray(this.items, indexes);

     // We could - of course - save the updated array with its new sort order 
     // for subsequent reloading (I.e. through NativeStorage, SQLite, Firebase etc)
     // but I'll leave that particular task to you to implement :)
  }
  

}

As you can see the logic is both simple and incredibly minimal as the "heavy lfting" for the drag and drop functionality is managed by the ItemReorder API.

All we have to do as developers is take advantage of the methods exposed by this API to implement a drag and drop UI for our list.

The component markup

Similar to what we covered for the drag and drop logic within the ionic-reorder/src/pages/home/home.ts class our component HTML leverages the following snippet of code on the component:

reorder="true" (ionItemReorder)="reorderItems($event)" 

This simply consists of the reorder attribute (which is set to true indicating that the list can be reordered) followed by the ionItemReorder event which is emitted when a list item has been dragged and dropped.

The ionItemReorder event provides the from and to index of the dragged and dropped item (I.e. where it was dragged from and where it was dropped to). This allows us as developers to call a function - which we pass the event object (which contains this index) as a parameter - to handle the reordering of the items (in this case that will be the reorderItems method in our HomePage component class).

Our simple HTML template for the ionic-reorder/src/pages/home/home.html component in full then looks like this:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Reorder
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
   <ion-list 
      reorder="true" 
      (ionItemReorder)="reorderItems($event)" 
      side="start">
      <ion-item *ngFor="let item of items">{{ item }}</ion-item>
   </ion-list> 

</ion-content>

This gives us a dynamically generated list that makes use of the ItemReorder API - which, when we test this within the browser using ionic serve, provides drag and drop capability like so:

GIF animation displaying list items being reordered through mouse drag and drop

Nice and easy!

In summary

Drag and drop functionality with lists is pretty straightforward and painless thanks to the ItemReorder API - providing you group all your items under the same list. If you're looking for alternative drag and drop functionality then you might want to consider the following tutorial I wrote detailing the use of Dragula with Ionic.

If you've enjoyed what you've read and/or found this helpful please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore different aspects of working with the Ionic framework in my e-book featured below and if you're interested in learning more about further articles and e-books that I'm writing please sign up to my FREE mailing list.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top