I would like to drag multiple <tr>'s up and down a table column at the same time. It's rather straight forward to drag individual rows using <draggable>, however what I'm looking for is a way to group, say, the previous row with the selected row and move them together while maintaining the ability to drag each row individually later.

I'm using Vue 2 and vuedraggable v2.24.3.

The table is as follows.

<table>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <draggable>
    <vue-component-here
      v-for="(task, i) in tasks"
      :prop="task.id"
      .
      .
      .
    />
  </draggable>
</table>

The sub-component will output a <tr> for each task.