ionic4 ion-reorder-group组件拖拽改变item顺序

2018在ionic项目中用到的组件有很多，这篇文章讲一讲ion-reorder-group这个组件的使用。刚开始我都不知道ionic4中已经封装了拖拽排序的组件，也是主管告诉我的。使用了这个组件的经历告诉我：仔细读官方文档，是没错的！
HTML中使用组件，代码如下

 
 
     
        {{ field.name}}
        
        
     
 

ionItemReorder绑定reorder事件，是item被拖拽时会被触发的事件，这个事件是ionic绑定在IonReorderGroup组件上的。记得一定要设置disabled属性，不然不会有拖拽按钮出现。

reorder(ev) {
    try {
        if (ev.detail.to === this.fieldList.length) {
            ev.detail.to -= 1;
        }
        if (ev.detail.from < ev.detail.to) {
            this.fieldList.splice(ev.detail.to + 1, 0, this.fieldList[ev.detail.from]);
            this.fieldList.splice(ev.detail.from, 1);
        }
        if (ev.detail.from > ev.detail.to) {
            this.fieldList.splice(ev.detail.to, 0, this.fieldList[ev.detail.from]);
            this.fieldList.splice(ev.detail.from + 1, 1);
        }
        ev.detail.complete();
    } catch (e) {
        return;
    }
}

customEvent继承自Event，添加了detail属性，包含from,to,complete,分别记录拖拽条目的前后index，complete方法需在拖拽结束后调用，否则会卡住。