How to retain dragged parent in the parent list

[OgaBoss]

Hello everyone, I am working on email template builder, but I currently have an issue, I cant seem to figure out how to make a dragged block retain its position.

I want to be able to drag the column block into the canvas and still have the column block showing

`
const templates = ref([])
const content = ref([
{
id: nanoid(),
block: Columns
}
])

const [contentList, blocks] = useDragAndDrop(content.value, {
group: 'basic'
})
const [templateList, blocksDetails] = useDragAndDrop(templates.value, {
group: 'basic'
})

  <div class="main-editor flex-1 p-6">
  <div class="size-full bg-white p-2">
    <div ref="templateList" class="mx-auto h-full w-[600px] border border-dashed bg-white">
      <component :is="block.block" v-for="block in blocksDetails" :key="block.id" />
    </div>
  </div>
</div>
<div ref="contentList" class="w-[400px] bg-[#161616] p-2">
  <component :is="block.block" v-for="block in blocks" :key="block.id" />
</div>

`