vue3 draggable中的clone怎么实现

在 Vue3 Draggable 中，当你拖动一个元素时，可以通过设置 `clone` 属性来克隆该元素。具体实现如下：

1. 在你的组件中添加一个 `draggable` 的元素，并设置 `clone` 属性为 `true`。

<draggable v-model="list" :clone="true">
  <div v-for="(item, index) in list" :key="index">
    {{ item }}
  </div>
</draggable>

2. 在你的 `draggable` 组件中使用 `createElement` 函数创建一个新的元素来代替被拖动的元素。

import { defineComponent, h } from 'vue'
import Draggable from 'vuedraggable'

export default defineComponent({
  components: {
    Draggable
  },
  setup() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  render() {
    return h(Draggable, {
      modelValue: this.list,
      'onUpdate:modelValue': (val) => {
        this.list = val
      },
      clone: true,
      item: 'div',
      'data-id': 'id'
    }, this.list.map((item, index) => {
      return h('div', {
        key: index,
        'data-id': index
      }, item)
    }))
  }
})

在这个例子中，我们使用了 `createElement` 函数来创建一个 `div` 元素，并为其设置 `key` 和 `data-id` 属性。这样，被拖动的元素就会被克隆并替换成新创建的元素。