How to move two table rows in one drag?

[manish-maersk]

I have a condition where the second row act as an accordion of first row. When I drag any of these two rows, I want to drag both the rows and drop them together. How can I achieve it?

<template>
  <VueDraggable v-model="list" target=".sort-target" animation="150">
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody class="sort-target">
        <template v-for="item in list" :key="item.id" >
          <tr class="cursor-move" @click="toggleAccordion(item.id)">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
          </tr>
          <tr v-if="expandedRows[item.id]" class="cursor-move" class="accordion-row">
            <td colspan="2"><div>some content here</div></td>
          </tr>
        </template>
      </tbody>
    </table>
  </VueDraggable>
</template>


<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { VueDraggable } from 'vue-draggable-plus'
  
  const list = ref([
    {
      name: 'Joao',
      id: 1
    },
    {
      name: 'Jean',
      id: 2
    },
    {
      name: 'Johanna',
      id: 3
    },
    {
      name: 'Juan',
      id: 4
    }
  ]);

  const expandedRows = reactive<Record<number, boolean>>({});

  //function to expand and contract the accordion
  const toggleAccordion = (id: number) => {
    expandedRows[id] = !expandedRows[id];
  };
</script>