Support dragging of scrollable containers?

[niksite]

I have the following code. It's essentially several Bootstrap columns (b-col) within a row (b-row). The columns have a limited height, while the assets-table inside each can be much taller, making it scrollable.

<template>
  <vue-draggable
    v-model="tileNames"
    tag="b-row"
    animation="200"
  >
    <b-col
      v-for="tile in tiles"
      :key="tile.id"
      cols="12"
      sm="6"
      lg="3"
      class="px-1 mb-3"
    >
      <assets-table :tile="tile" />
    </b-col>
  </vue-draggable>
</template>

As the screenshot shows, when I drag a b-col, its dragged representation also incorrectly clones objects from below. For example, if I scroll the content within a column to the bottom, dragging that column then also includes elements from above in the dragged representation.

How can I fix this? I would like the dragged representation to be limited to the b-col itself, reflecting only the column, and not capture any irrelevant content.