init:低代码初始化

src/components/VueDemo.vue

@@ -0,0 +1,58 @@
+<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>
+</template>
+<script>
+import { VueDraggableNext } from 'vue-draggable-next'
+export default {
+  components: {
+    draggable:VueDraggableNext
+  },
+  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 }
+      ]
+    };
+  }
+};
+</script>
+<style scoped>
+.list-group-item {
+  height: 30px;
+  border: 1px solid #888888;
+}
+</style>