Tengo un problema en el que no puedo arrastrar el elemento arrastrado después de colocarlo en la mesa.

el objetivo es arrastrar los elementos de arriba hacia abajo en el momento adecuado.

**esta es la mesa donde aterriza el elemento de la carta**

 <tr v-for="(space, i) of spaces" :key="space.id + '-' + i"> <td slot="header">{{ space.name }}</td> <draggable v-model="space.tijden[time]" v-for="(bookings, time) in space.tijden" :key="space.id + '-' + time" group="bookingDrag" tag="td" @change="log" @update="(evt) => update(evt, this)" class="bg-light-gray" > <div v-for="item of space.tijden[time]" :key="item.id + '-booking'" class="bg-light" :data-id="item.id" > Time: {{ item.startTime }}~{{ item.endTime }}<br /> Client :{{ item.name }} <br /> {{ item.event }} </div> </draggable>

**esta es la tarjeta**

 <draggable scope="col" @change="log" @update="(evt) => update(evt, this)" style="border: 1px solid black; min-width: 100px; min-height: 25px" v-model="booking" group="bookingDrag" > <transition-group type="transition" name="flip-list" tag="tbody"> <b-card v-for="item in booking" :key="item.id" img-src="img.com/img1" img-height="150px" img-width="150px" img-alt="Image" tag="article" :data-id="item.id" style="img" class="mb-2" > <b-card-text> Time: {{ item.startTime }}~{{ item.endTime }}<br />Name: {{ item.name }} <br /> {{ item.event }} </b-card-text> </b-card> </transition-group> </draggable>