movable floating fab button ionic vue

Question

I am building an app in Ionic Vue

I have added a fab button like following:

  <ion-fab
    vertical="bottom"
    horizontal="end"
    slot="fixed"
    class="utility_fab_button"
    :style="{
      bottom: `${ion_fab_position.bottom}px`,
      right: `${ion_fab_position.right}px`,
    }"
    ref="utility_fab_button_ref"
  >
    <ion-fab-button color="dark" v-on:dragstart="dragStart">
      <ion-icon :icon="helpCircleOutline"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button color="dark" @click="goToWhatsApp($event)">
        <ion-icon :icon="logoWhatsapp"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="dark" @click="sendEmail($event)">
        <ion-icon :icon="mailOutline"></ion-icon>
      </ion-fab-button>
      <ion-fab-button color="dark" @click="makeCall($event)">
        <ion-icon :icon="callOutline"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

exports default {
  data() {
    return {
      ion_fab_position: {
        bottom: "10",
        right: "10",
      },
    }
  }
}

I want to add drag system in the fab button where user can drag and move the button wherever in the screen.

How do i do it?

Answer 1

Add position: fixed and z-index: 9999