How to move two table rows in one drag?

[web-mm]

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?

In addition to this, no row should be placed in between row and accordion.

<template>
  <VueDraggable
    v-model="list"
    target=".sort-target"
    animation="150"
    @start="onStart"
    @end="onEnd"
  >
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody class="sort-target">
        <template v-for="(item, index) in list" :key="item.id">
          <!-- Both tr should move in one drag -->
          <tr
            @click="toggleAccordion(item.id)"
            :class="{
              'row-selected': expandedRows[item.id],
            }"
          >
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
          </tr>

          <!-- No item should be dragged here -->

          <tr v-if="expandedRows[item.id]" class="accordion-row">
            <td colspan="2">
              <div>some content here {{ index }}</div>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </VueDraggable>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { VueDraggable, DraggableEvent } 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];
};

function onStart(event: DraggableEvent) {}
function onEnd(event: DraggableEvent) {}
</script>
<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed; /* Ensures the widths specified are respected */
}

th,
td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}
</style>

https://stackblitz.com/edit/vitejs-vite-vvgac6?file=src%2FApp.vue

[bufgix]

Did you find any solutions @web-mm ?