html 列表使用拖放和reorderArray重新排序

Posted 2021-05-11

import { Component } from '@angular/core';
import { NavController, reorderArray } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  animals = [];
  constructor(public navCtrl: NavController) {
    this.animals = ["Dog", "Cat", "Kangaroo", "Zebra", "Elephant"]
  }
  reorderItem(indexes) {
    this.animals = reorderArray(this.animals, indexes)
  }
}

<ion-content>
  <ion-list reorder="true" (ionItemReorder)="reorderItem($event)">
    <ion-item *ngFor="let animaux of animals">{{animaux}}</ion-item>
  </ion-list>
</ion-content>