// 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.
I’m glad it helped , but upon further work it looks like there is a bug in ItemReorder when dragging items into the first position (index 0) :
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;
}
}
);
}