vue3使用draggable=true怎么实现clone

在Vue3中，可以使用`@dragstart`事件来设置拖拽开始时的行为，可以使用`event.dataTransfer.setData()`方法来设置拖拽数据，可以使用`event.dataTransfer.setDragImage()`方法来设置拖拽时的图像。

要实现拖拽克隆功能，可以在`@dragstart`事件中创建一个克隆节点，并将其添加到DOM树中。然后使用`setData()`方法将克隆节点的ID作为拖拽数据传递。在`setDragImage()`方法中，将克隆节点作为拖拽时的图像。

下面是一个示例代码：

<template>
  <div>
    <div
      v-for="(item, index) in items"
      :key="item.id"
      :draggable="true"
      @dragstart="handleDragStart(index, $event)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'item 1' },
        { id: 2, text: 'item 2' },
        { id: 3, text: 'item 3' },
      ],
    };
  },
  methods: {
    handleDragStart(index, event) {
      const item = this.items[index];

      // 创建克隆节点
      const clone = event.target.cloneNode(true);

      // 将克隆节点添加到DOM树中
      event.target.parentNode.appendChild(clone);

      // 设置拖拽数据
      event.dataTransfer.setData('text/plain', item.id.toString());

      // 设置拖拽时的图像
      event.dataTransfer.setDragImage(clone, 0, 0);
    },
  },
};
</script>

在这个示例中，当用户拖动一个项目时，将创建一个克隆节点，并将其添加到DOM树中。然后，将项目ID作为拖拽数据传递，并将克隆节点设置为拖拽时的图像。这样，用户就可以在拖动过程中看到克隆节点，并且可以在放置位置上放置拖动的节点。