diff --git a/src/components/MainView.vue b/src/components/MainView.vue
index 019189d..c6cd001 100644
--- a/src/components/MainView.vue
+++ b/src/components/MainView.vue
@@ -11,6 +11,7 @@
       </div>
     </div>
     <div style="flex-grow: 1; flex-shrink: 0; overflow-y: auto;">
+
       <div>
         <div
           style="display: flex; flex-direction: row; width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
@@ -29,6 +30,7 @@
         <div>
         </div>
       </div>
+
     </div>
   </div>
 
@@ -39,7 +41,7 @@ import { onMounted, ref } from 'vue';
 import NestedFunction from './NestedFunction.vue';
 import DynamicComponent from './DynamicComponent.vue';
 
-import { useDraggable } from 'vue-draggable-plus';
+import { SortableEvent, useDraggable, VueDraggable } from 'vue-draggable-plus';
 import { uuid } from 'lsp-uuid';
 import { IComponent } from '../type/IComponent.ts';
 import { componentScheme } from '../schemes/scheme.ts';
@@ -48,7 +50,6 @@ const componentsList = ref<any[]>([]);
 
 
 const list = ref<IComponent[]>([]);
-
 const el2 = ref();
 
 
@@ -61,6 +62,48 @@ onMounted(() => {
 
 
 
+const el = ref()
+
+const onStart = (e: SortableEvent) => {
+  console.log('start', e)
+}
+
+const onEnd = (e: SortableEvent) => {
+  console.log('onEnd', e)
+}
+
+const onUpdate = () => {
+  console.log('update')
+}
+
+useDraggable(el, componentsList, {
+  animation: 150,
+  group: { name: 'designer', pull: 'clone', put: false },
+  sort: false,
+  onClone() {
+    console.log('clone')
+  },
+  clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style' | 'slots', any>) {
+    return {
+      id: `${element.id}-${uuid()}`,
+      name: element.name,
+      type: element.type,
+      props: element.props,
+      class: element.class,
+      designer: '',
+      text: element.text,
+      children: [],
+      style: element.style,
+      visible: "",
+      slots: element.slots,
+      disable: "",
+      events: {},
+      loop: {},
+    }
+  }
+})
+
+
 useDraggable(el2, componentsList, {
   animation: 150,
   group: { name: 'designer', pull: 'clone', put: false },