[하이브리드앱 ionic]시작해보기 15 - ion-item 리스트 순서변경 가능하도록 만들기(reorder)

page.html

 

ion-reorder-group으로 묶어줍니다.

<ion-reorder-group (ionItemReorder)="onRenderItems($event)" disabled="false">
    <ion-item *ngFor="let item of listItems">
        <ion-label>
            {{item}}
        </ion-label>
        <ion-reorder></ion-reorder>
    </ion-item>
</ion-reorder-group>

 

 

page.ts

 //items
 listItems = [
    "비행기","숙소","식비","교통비"
  ];
  

//재정렬
 onRenderItems(event) {
    console.log(`Moving item from ${event.detail.from} to ${event.detail.to}`);
     let draggedItem = this.listItems.splice(event.detail.from,1)[0];
     this.listItems.splice(event.detail.to,0,draggedItem);
    event.detail.complete();
    console.log(this.listItems);
  }

 

 

이렇게 코드를 추가하면

ion-reorder에 아이콘이 추가됩니다.

 

리스트 순서를 재정렬할 수 있습니다

 

순서를 재정렬 후 complete()을 통해 완료를 시키고,

console에 바뀐결과를 찍어보면 아래와 같습니다.