ionic react reorder

drag and drop item 5

list is reordered

import React, { useState } from 'react';

import {

  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,

  IonAlert, IonButton, IonCard, IonCardHeader,

  IonCardSubtitle, IonCardTitle, IonCardContent,

  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,

  IonList, IonItemDivider, IonTextarea, IonAvatar,

  IonText, IonThumbnail, IonSelectOption, IonInput,

  IonSelect, IonCheckbox, IonToggle, IonRange,

  IonNote, IonRadio, IonItemSliding, IonItemOption,

  IonItemOptions, IonListHeader, IonChip, IonImg,

  IonLoading, IonProgressBar, IonSkeletonText,

  IonReorder, IonReorderGroup,

} from '@ionic/react';

import ExploreContainer from '../components/ExploreContainer';

import './Tab2.css';

import {

  closeCircle, home, star, navigate,

  informationCircle, checkmarkCircle, shuffle,

  call, pizza

} from 'ionicons/icons';

import { ItemReorderEventDetail } from '@ionic/core';

const Tab2: React.FC = () => {

  function doReorder(event: CustomEvent<ItemReorderEventDetail>) {

    // The `from` and `to` properties contain the index of the item

    // when the drag started and ended, respectively

    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);

    // Finish the reorder and position the item in the DOM based on

    // where the gesture ended. This method can also be called directly

    // by the reorder group

    event.detail.complete();

  }

  return (

    <IonPage>

      <IonHeader>

        <IonToolbar>

          <IonTitle>Reorder Examples</IonTitle>

        </IonToolbar>

      </IonHeader>

      <IonContent>

        {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}

        <IonReorderGroup disabled={false} onIonItemReorder={doReorder}>

          {/*-- Default reorder icon, end aligned items --*/}

          <IonItem>

            <IonLabel>Item 1</IonLabel>

            <IonReorder slot="end" />

          </IonItem>

          <IonItem>

            <IonLabel>Item 2</IonLabel>

            <IonReorder slot="end" />

          </IonItem>

          {/*-- Default reorder icon, start aligned items --*/}

          <IonItem>

            <IonReorder slot="start" />

            <IonLabel>Item 3</IonLabel>

          </IonItem>

          <IonItem>

            <IonReorder slot="start" />

            <IonLabel>Item 4</IonLabel>

          </IonItem>

          {/*-- Custom reorder icon end items --*/}

          <IonItem>

            <IonLabel>Item 5</IonLabel>

            <IonReorder slot="end">

              <IonIcon icon={pizza} />

            </IonReorder>

          </IonItem>

          <IonItem>

            <IonLabel>Item 6</IonLabel>

            <IonReorder slot="end">

              <IonIcon icon={pizza} />

            </IonReorder>

          </IonItem>

          {/*-- Items wrapped in a reorder, entire item can be dragged --*/}

          <IonReorder>

            <IonItem>

              <IonLabel>Item 7</IonLabel>

            </IonItem>

          </IonReorder>

          <IonReorder>

            <IonItem>

              <IonLabel>Item 8</IonLabel>

            </IonItem>

          </IonReorder>

        </IonReorderGroup>

      </IonContent>

    </IonPage >

  )

}

export default Tab2;