itemReorder docs/examples

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;
        }
      }
    );
  }