test:1.组件嵌套拖拽

2.schema定义与动态绑定

src/components/NestedFunction.vue

@@ -0,0 +1,55 @@
+<template>
+  <ul class="drag-area" ref="el">
+    <li v-for="el in modelValue" :key="el.name">
+      <div style="width: 200px;border: 1px solid red;">
+        <p>{{ el.name }}:{{ el.id }}</p>
+      </div> 
+      <nested-function v-model="el.children" />
+    </li>
+  </ul>
+</template>
+<script setup lang="ts">
+import { useDraggable} from 'vue-draggable-plus'
+import { computed, ref } from 'vue'
+import { IList } from '../type/IList'
+
+interface Props {
+  modelValue: IList[]
+}
+
+const props = defineProps<Props>()
+interface Emits {
+  (e: 'update:modelValue', value: IList[]): void
+}
+const emits = defineEmits<Emits>()
+const list = computed({
+  get: () => props.modelValue,
+  set: value => emits('update:modelValue', value)
+})
+
+const el = ref()
+useDraggable(el, list, {
+  group: 'designer',
+  animation: 150,
+  onStart() {
+    console.log('start')
+  },
+  onUpdate() {
+    console.log('update list1')
+  },
+  onAdd: (e) => {
+    // console.log(e)
+    console.log('add list1')
+  },
+  onRemove: () => {
+    console.log('remove list1')
+  }
+},)
+</script>
+<style scoped>
+.drag-area {
+  min-height: 50px;
+  outline: 1px dashed;
+  background-color: hsl(0, 0%, 100%);
+}
+</style>