javascript - VueDraggable send request to DB while drag and drop

Question

I need a help for vuedraggable component. I have three columns. (Photo inserted) I want to drag BoardUserCard between columns and want to send PUT request to database for changing "lead_status_id" related to column dropped. How can I achieve this ? I can not find any example about apis in documentation.

<template>
  <div class="board">
    <div class="boards">
      <div class="boards-cards leads">
        <div class="board-card-header ">
          <h3>
            Leads
          </h3>
          <span>
            {{ allLeads.length }}
          </span>
        </div>
        <draggable
          ghost-class="ghost"
          :list="allLeads"
          class="board-card-body"
          :options = "{group:allLeads}"
          group="leads"
          @change="handleChange"
        >
          <BoardUserCard
            v-for="item in allLeads"
            :key="item.name"
            :name="item.name"
            :email="item.email"
            :img="item.img"
            :status="item.status"
          />
        </draggable>
      </div>
      <div class="boards-cards contacted">
        <div class="board-card-header ">
          <h3>
            Contacted
          </h3>
          <span>
            {{ contactedLeads.length }}
          </span>
        </div>
        <draggable
          ghost-class="ghost"
          :list="contactedLeads"
          class="board-card-body"
          :options = "{group:contactedLeads}"
          group="leads"
          @change="handleChange"
        >
          <BoardUserCard
            v-for="item in contactedLeads"
            :key="item.name"
            :name="item.name"
            :email="item.email"
            :img="item.img"
            :status="item.status"
          />
        </draggable>
      </div>
      <div class="boards-cards converted">
        <div class="board-card-header ">
          <h3>
            Converted
          </h3>
          <span>
            {{ convertedLeads.length }}
          </span>
        </div>
        <draggable
          ghost-class="ghost"
          :list="convertedLeads"
          class="board-card-body"
          :options = "{group:convertedLeads}"
          group="leads"
          @change="handleChange"
        >
          <BoardUserCard
            v-for="item in convertedLeads"
            :key="item.name"
            :name="item.name"
            :email="item.email"
            :img="item.img"
            :status="item.status"
          />
        </draggable>
      </div>
    </div>



  </div>
</template>

<script>
import BoardUserCard from "@/components/BoardUserCard.vue";
import draggable from "vuedraggable";

export default {
  name: "Dashboard",
  components: {
    BoardUserCard,
    draggable,
  },
  data() {
    return {
      showModal: false,
      allLeads: [
        {
          name: "Richard",
          email: "Richard@gmail.com",
          img: "avatar-small.svg",
          status: "all"
        },
        { name: "Rachael", email: "Rachael@gmail.com", img: "leads.svg", status: "all" },
        { name: "Matt", email: "Matt@gmail.com", img: "user-avatar.svg",status: "all" },
        { name: "Brad", email: "Brad@gmail.com", img: "leads.svg", status: "all"},
      ],
      contactedLeads: [
        {
          name: "Jeniffer",
          email: "Jeniffer@gmail.com",
          img: "avatar-small.svg",
          status: "contacted"
        },
      ],
      convertedLeads: [
        { name: "Mike", email: "Mike@gmail.com", img: "leads.svg", status: "converted" },
      ],

    };
  },
  methods: {
    openModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    },
    handleChange(event){
      console.log(event)
    }
  },
};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

All I need to add data attribute in component data-id="4"

     <draggable
          ghost-class="ghost"
          :list="convertedLeads"
          class="board-card-body"
          :options = "{group:convertedLeads}"
          group="leads"
          @end="handleChange"  
          data-id="4"     
        >

And access data-id attribute in handleChange function 

    handleChange(event){
      console.log(event.from.getAttribute("data-id"))
      console.log(event.to.getAttribute("data-id"))
    }