vue 复制元素后拖拽

Vue.js 通过其组件系统和响应式的数据绑定特性可以方便地处理复制元素并实现拖拽功能。在 Vue 中，你可以这样做：

1. **创建模板**：首先，在模板中定义你想要复制和拖动的基本元素，比如一个 `<div>` 或者 `<li>`。

<div v-draggable @copy="handleCopy" :key="item.id">
  {{ item.content }}
</div>

这里使用了第三方库 `vuedraggable`（https://github.com/SortableJS/Vue.Draggable），它提供了丰富的拖拽选项。

2. **定义数据和方法**：在 Vue 实例中，定义数据来存储原始元素，并设置 `handleCopy` 方法来复制元素。

export default {
  data() {
    return {
      items: [
        { id: 1, content: '原内容' }
      ],
      copiedItems: []
    };
  },
  methods: {
    handleCopy(e) {
      const newElement = this.$refs.draggable.clone();
      newElement.id = Date.now(); // 添加唯一标识
      this.copiedItems.push(newElement);
    }
  },
  mounted() {
    this.$refs.draggable.init();
  }
}

3. **初始化和监听事件**：在 `mounted` 钩子函数中，对可拖拽元素进行初始化，例如设置允许拖放的行为等。同时监听 `@copy` 事件，当元素被复制时调用 `handleCopy` 方法。

4. **添加拖拽效果**：`vuedraggable` 库会提供一系列的钩子和属性，如 `move`、`end` 等，用于处理拖动过程中的各种状态变化。