itemReorder docs/examples

Hey everyone,

I was looking for a way to re order items on a list for Ionic 2, on a forum post I saw that it was already added on beta10, but the docs doesn’t really say much about how to use them: http://ionicframework.com/docs/v2/api/components/item/ItemReorder/

Anyone has any examples of this? Or maybe point me in the right direction if I’m looking at the wrong docs?

Cheers!

I think I was inspired by @Richa123 from this post:

Here’s what’s working for me:

<ion-list *ngIf="items && auth.isLoggedIn()" reorder="{{ item ? true : false }}" (ionItemReorder)="reorderItem($event)">

  // pos (Position) is not really an event, just data object:
  reorderItem(pos) {
    this.isReordering = true; // for preventing click propagation / drilldown
    // from mouse down-up.
    // on gapi reorder success call reorderArray:
    var toIndex = (pos.to < pos.from) ? pos.to - 1 : pos.to;
    this.items[pos.from].parent = this.item.id;
    this.gapi.moveTask(this.items[pos.from], this.items[toIndex]).subscribe(
      (success)=>{
        if (success) {
          reorderArray(calr.items, pos);
        }
      }
    );
  }

In my case, “item” is just the parent of “items,” which is an array of zero or more items. I imagine most cases would not be hierarchical like mine. isReordering is just a flag I’m using to prevent the reorder from being counted as a click.

Thanks a lot, that gave me a better understanding of the function :smiley:

I’m glad it helped :slight_smile:, but upon further work it looks like there is a bug in ItemReorder when dragging items into the first position (index 0) :disappointed::

Also, I wanted to keep the reordered item in its new position and only revert it upon failure of the API call (for a better UX). So here’s what I have now:

  reorderItem(pos) {
    // Ionic BUG in list reorder, apparently.  Can't drag index > 1 to index 0; Ionic substitutes 1
    // so dragging ix3 to ix0 yields pos.from => 3, pos.to => 1 (!).
    // dragging from ix1 to ix0 is allowed, but yields pos.from => 1, pos.to => -100 !!!
    if (pos.to == -100) { pos.to = 0; } // Ionic BUG??? dropping on first item in list sends pos.to=-100 !!!
    console.log('move to:', pos);
    var posOrig:any = {}; 
    Object.assign(posOrig, pos); // cache orig for reversion on api update fail
    var calr = this;
    this.items[pos.from].isUpdating = true;
    this.isReordering = true; // for preventing click propagation / drilldown from mouse down-up.
    var toIndex = (pos.to < pos.from) ? pos.to - 1 : pos.to;
    this.items[pos.from].parent = this.item.id;
    reorderArray(calr.items, pos); // optimistic UI...
    //this.gapi.moveTask(this.items[pos.from], this.items[toIndex]).subscribe(
    // *note*, using pos.to below since items array is *already reordered!*
    this.gapi.moveTask(this.items[pos.to], this.items[toIndex]).subscribe(
      (success)=>{
        if (success) {
          console.log('update success:', success);
          //calr.items[toIndex].isUpdating = false;
          calr.items[pos.to].isUpdating = false;
        }
        else {
          console.log('update fail');
          // api call failed; revert to original position:
          reorderArray(calr.items, posOrig);
          // TODO: set updateError style...
          //calr.items[posOrig.isUpdating = false;
        }
      }
    );
  }