ionic-framework/packages/vue/test/base/src/views/ReorderGroup.vue at 390ee141a9dc741fb2e54eb787436ca04e8db7b2 · ionic-team/ionic-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Reorder Group</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-reorder-group :disabled="false" @ion-reorder-end="onReorderEnd">
        <ion-item>
          <ion-reorder slot="end"></ion-reorder>
          <ion-label>Item 1</ion-label>
        </ion-item>
        <ion-item>
          <ion-reorder slot="end"></ion-reorder>
          <ion-label>Item 2</ion-label>
        </ion-item>
        <ion-item>
          <ion-reorder slot="end"></ion-reorder>
          <ion-label>Item 3</ion-label>
        </ion-item>
      </ion-reorder-group>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonButtons,
  IonBackButton,
  IonContent,
  IonHeader,
  IonItem,
  IonLabel,
  IonPage,
  IonReorder,
  IonReorderGroup,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";
import { defineComponent } from "vue";
import type { ReorderEndCustomEvent } from "@ionic/vue";

export default defineComponent({
  components: {
    IonButtons,
    IonBackButton,
    IonContent,
    IonHeader,
    IonItem,
    IonLabel,
    IonPage,
    IonReorder,
    IonReorderGroup,
    IonTitle,
    IonToolbar,
  },
  setup() {
    const onReorderEnd = (event: ReorderEndCustomEvent) => {
      if (event.detail.from !== event.detail.to) {
        console.log('ionReorderEnd: Dragged from index', event.detail.from, 'to', event.detail.to);
      } else {
        console.log('ionReorderEnd: No position change occurred');
      }

      event.detail.complete();
    };

    return {
      onReorderEnd,
    };
  },
});
</script>