Ionic Framework - reorder(재정렬)

 

Reorder

reorder는 내부의 항목을 끌어다 놓아 해당 그룹 내에서 순서를 변경할 수 있도록 하는 구성 요소입니다.

 

최근 Ionic을 이용해서 개발을 하고있는데,

다른 언어 샘플 코드는 모르겠고, reorder 페이지의 Vue 샘플 코드를 그대로 사용하면 리스트를 변경할때마다

화면이 멈춰버리는 일이 발생하기에 추후에 또 쓸지 모르니 간단한 해결 방법을 기록해 봅니다.

 

 

샘플 코드

<template>
  <!-- HEADER -->
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Ionic Framework - Reorder</ion-title>
    </ion-toolbar>
  </ion-header>
  <!-- CONTENT -->
  <ion-content class="ion-padding" color="light">
    <ion-list>
      <ion-reorder-group :disabled="false" @ionItemReorder="replaceItemLists($event)">
        <ion-item v-for="item in itemLists" :key="item">
          <ion-label>
            {{ item }}
          </ion-label>
          <ion-reorder></ion-reorder>
        </ion-item>
      </ion-reorder-group>
    </ion-list>
    <ion-list class="ion-text-center">
      <ion-button @click="checkItems">checkItems</ion-button>
    </ion-list>
  </ion-content>
</template>

<script>
import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from "@ionic/vue";
import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonList } from "@ionic/vue";

export default {
  components: {
    IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
    IonItem, IonLabel, IonReorder, IonReorderGroup, IonList,
  },
  data() {
    return {
      itemLists: ["no1", "no2", "no3", "no4", "no5", "no6"],
    };
  },
  methods: {
    replaceItemLists(event) {
      console.log(`아이템 이동: ${event.detail.from} 에서 ${event.detail.to}`);
      const moveItem = this.itemLists.splice(event.detail.from, 1)[0];
      this.itemLists.splice(event.detail.to, 0, moveItem);
      event.detail.complete();
    },
    checkItems() {
      console.log(JSON.stringify(this.itemLists));
    },
  },
};
</script>

외부에 따로 수정 같은 이벤트 버튼을 만들어 ion-reorder-group의 :disabled="false" 값을 토글하게 만들면 평소에는 이동을 막고 수정하고 싶을때만 이동할 수 있도록 지정할 수 있습니다.

 

 

결과

해당 아이템을 드래그하고

배열을 확인해보면 바뀐 순서가 적용되어 있습니다.

이런식으로 배열의 순서를 변경을 하였다면, 

콘솔을 출력하는 버튼이 아닌 실제로 서버로 업데이트 하는 형식으로 변경해주면 됩니다.

 

각 오브젝트 배열들에 order를 index 번호로 새로 지정하는 것 등으로 서버에 순서 변경 저장 가능

itemLists.forEach((e, i) => e.order = i + 1)