test:可拖拽组件测试

src/components/MyComponent1.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <!-- 左侧组件列表 -->
+    <div class="left">
+      <div
+        class="left-item"
+        v-for="item in list1"
+        :key="item.code"
+        draggable
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <!-- 画布区域 -->
+    <div class="targetContent" ref="targetContent">
+      <div
+        class="item"
+        v-for="item in list2"
+        :key="item.id"
+        :ref="item.id"
+        :style="{
+          top: `${item.top - 16}px`,
+          left: `${item.left - 85}px`,
+          'z-index': `${item.zIndex}`
+        }"
+      >
+        <template v-if="item.code === 'MyInput'">
+          <a-input></a-input>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

src/components/MyComponent2.vue

@@ -0,0 +1,22 @@
+<template>
+  <div style="background: lightgreen; height: 100%; padding: 10px;">
+    组件2内容
+    <div v-if="$slots.default" class="slot-area">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyComponent2'
+}
+</script>
+
+<style scoped>
+.slot-area {
+  border: 2px dashed grey;
+  min-height: 50px;
+  margin-top: 10px;
+}
+</style>

src/components/MyComponent3.vue

@@ -0,0 +1,22 @@
+<template>
+  <div style="background: lightcoral; height: 100%; padding: 10px;">
+    组件3内容
+    <div v-if="$slots.default" class="slot-area">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyComponent3'
+}
+</script>
+
+<style scoped>
+.slot-area {
+  border: 2px dashed grey;
+  min-height: 50px;
+  margin-top: 10px;
+}
+</style>

src/components/VueDemo.vue

@@ -1,58 +1,81 @@
 <template>
-  <a-row style="padding: 20px">
-    <a-col span="10">
-      <h3>列表区域</h3>
-      <draggable
-        class="dragArea list-group"
-        :list="list1"
-        :sort="false"
-        :group="{ name: 'people', pull: 'clone', put: false }"
-      >
-        <div class="list-group-item" v-for="element in list1" :key="element.name" >
-          {{ element.name }}
-        </div>
-      </draggable>
-    </a-col>
-    <a-col span="10" offset="4">
-      <h3>目标区域</h3>
-      <draggable
-        class="dragArea list-group"
-        :list="list2"
-        group="people"
-      >
-        <div class="list-group-item" v-for="element in list2" :key="element.name" >
-          {{ element.name }}
-        </div>
-      </draggable>
-    </a-col>
-  </a-row>
+  <div style="display: flex;">
+    <section v-draggable="[
+      list1,
+      {
+        animation: 150,
+        group: {
+          name: 'people',
+          pull: 'clone',
+          put: false
+        },
+        sort: false,
+        clone
+      }
+    ]">
+      <div v-for="item in list1" :key="item.id" style="border: 1px solid green;margin: 5px;">
+        {{ item.name }}
+      </div>
+    </section>
+    <section v-draggable="[
+      list2,
+      {
+        animation: 150,
+        group: 'people'
+      }
+    ]">
+      <div v-for="item in list2" :key="item.id" style="border: 1px solid red;margin: 5px;">
+        {{ item.name }}
+      </div>
+    </section>
+  </div>
+  <div>
+    <div>
+      {{ list1 }}
+    </div>
+    <div>
+      {{ list2 }}
+
+    </div>
+    </br>
+  </div>
 </template>
-<script>
-import { VueDraggableNext } from 'vue-draggable-next'
-export default {
-  components: {
-    draggable:VueDraggableNext
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { uuid } from 'lsp-uuid'
+import { vDraggable } from 'vue-draggable-plus'
+
+const list1 = ref([
+  {
+    name: 'Joao',
+    id: '1'
   },
-  data() {
-    return {
-      list1: [
-        { name: "组件1", id: 1 },
-        { name: "组件2", id: 2 },
-        { name: "组件3", id: 3 },
-        { name: "组件4", id: 4 }
-      ],
-      list2: [
-        { name: "画布组件1", id: 5 },
-        { name: "画布组件2", id: 6 },
-        { name: "画布组件3", id: 7 }
-      ]
-    };
+  {
+    name: 'Jean',
+    id: '2'
+  },
+  {
+    name: 'Johanna',
+    id: '3'
+  },
+  {
+    name: 'Juan',
+    id: '4'
+  }
+])
+const list2 = ref(
+  list1.value.map(item => ({
+    name: `${item.name}-2`,
+    id: `${item.id}-2`
+  }))
+)
+
+function clone(element: Record<'name' | 'id', string>) {
+  const len = list2.value.length
+  return {
+    name: `${element.name}-clone-${len}`,
+    id: `${element.id}-clone-${uuid()}`
   }
-};
-</script>
-<style scoped>
-.list-group-item {
-  height: 30px;
-  border: 1px solid #888888;
 }
-</style>
+</script>