ionic4 ion-reorder-group組件拖拽改變item順序

2018在ionic項目中用到的組件有不少，這篇文章講一講ion-reorder-group這個組件的使用。剛開始我都不知道ionic4中已經封裝了拖拽排序的組件，也是主管告訴個人。使用了這個組件的經歷告訴我：仔細讀官方文檔，是沒錯的！
HTML中使用組件，代碼以下

<!--一個排序組合一個ion-reorder-group-->
 <ion-reorder-group [disabled]="false" (ionItemReorder)="reorder($event)">
     <ion-item color="tertiary" *ngFor="let field of fieldList,let i=index">
        <ion-label>{{ field.name}}</ion-label>
        <!--拖拽按鈕-->
        <ion-reorder slot="end"></ion-reorder>
     </ion-item>
 </ion-reorder-group>

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方法需在拖拽結束後調用，不然會卡住。