diff --git a/components.d.ts b/components.d.ts
index 91249b2..2bf5797 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,6 +7,13 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElLabel: typeof import('element-plus/es')['ElLabel']
+    ElText: typeof import('element-plus/es')['ElText']
+    MyComponent1: typeof import('./src/components/MyComponent1.vue')['default']
+    MyComponent2: typeof import('./src/components/MyComponent2.vue')['default']
+    MyComponent3: typeof import('./src/components/MyComponent3.vue')['default']
     VueDemo: typeof import('./src/components/VueDemo.vue')['default']
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 558fb1b..25cacfe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,15 @@
       "dependencies": {
         "@vueuse/core": "^10.11.0",
         "element-plus": "^2.7.8",
+        "lodash": "^4.17.21",
+        "lsp-uuid": "^3.2.0",
         "vue": "^3.2.25",
-        "vue-draggable-next": "^2.2.1"
+        "vue-draggable-next": "^2.2.1",
+        "vue-draggable-plus": "^0.5.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.5",
+        "less": "^4.2.0",
         "sass": "^1.77.8",
         "typescript": "^5.2.2",
         "unplugin-auto-import": "^0.18.2",
@@ -888,6 +892,11 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg=="
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://repo.bingosoft.net/repository/npm/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -1600,6 +1609,18 @@
       "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==",
       "dev": true
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://repo.bingosoft.net/repository/npm/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://repo.bingosoft.net/repository/npm/csstype/-/csstype-3.1.3.tgz",
@@ -1781,6 +1802,19 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://repo.bingosoft.net/repository/npm/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.5.4",
       "resolved": "https://repo.bingosoft.net/repository/npm/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
@@ -2034,6 +2068,32 @@
         "he": "bin/he"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://repo.bingosoft.net/repository/npm/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://repo.bingosoft.net/repository/npm/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.6",
       "resolved": "https://repo.bingosoft.net/repository/npm/immutable/-/immutable-4.3.6.tgz",
@@ -2087,6 +2147,12 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://repo.bingosoft.net/repository/npm/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -2138,6 +2204,32 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/less": {
+      "version": "4.2.0",
+      "resolved": "https://repo.bingosoft.net/repository/npm/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "dev": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://repo.bingosoft.net/repository/npm/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -2166,7 +2258,7 @@
     },
     "node_modules/lodash": {
       "version": "4.17.21",
-      "resolved": "https://repo.bingosoft.net/repository/npm/lodash/-/lodash-4.17.21.tgz",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash-es": {
@@ -2184,6 +2276,14 @@
         "lodash-es": "*"
       }
     },
+    "node_modules/lsp-uuid": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/lsp-uuid/-/lsp-uuid-3.2.0.tgz",
+      "integrity": "sha512-onsO1mGkAobJq1IYGZcuqBb3cTY/N/EmNKN8ovXFKEpkjWQxHfmTOqDm/SLZ14pLimC5Qfd5sfMpRCx5N6+OMQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.10",
       "resolved": "https://repo.bingosoft.net/repository/npm/magic-string/-/magic-string-0.30.10.tgz",
@@ -2193,6 +2293,30 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://repo.bingosoft.net/repository/npm/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://repo.bingosoft.net/repository/npm/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/memoize-one": {
       "version": "6.0.0",
       "resolved": "https://repo.bingosoft.net/repository/npm/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -2227,6 +2351,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://repo.bingosoft.net/repository/npm/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://repo.bingosoft.net/repository/npm/mime-db/-/mime-db-1.52.0.tgz",
@@ -2309,6 +2446,23 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/needle": {
+      "version": "3.3.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://repo.bingosoft.net/repository/npm/neo-async/-/neo-async-2.6.2.tgz",
@@ -2338,6 +2492,15 @@
       "resolved": "https://repo.bingosoft.net/repository/npm/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://repo.bingosoft.net/repository/npm/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -2370,6 +2533,16 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.1.3",
       "resolved": "https://repo.bingosoft.net/repository/npm/pkg-types/-/pkg-types-1.1.3.tgz",
@@ -2409,6 +2582,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://repo.bingosoft.net/repository/npm/punycode/-/punycode-2.3.1.tgz",
@@ -2552,6 +2732,13 @@
       ],
       "peer": true
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://repo.bingosoft.net/repository/npm/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/sass": {
       "version": "1.77.8",
       "resolved": "https://repo.bingosoft.net/repository/npm/sass/-/sass-1.77.8.tgz",
@@ -2570,6 +2757,13 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://repo.bingosoft.net/repository/npm/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -2629,7 +2823,6 @@
       "resolved": "https://repo.bingosoft.net/repository/npm/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2755,6 +2948,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://repo.bingosoft.net/repository/npm/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "dev": true
+    },
     "node_modules/typescript": {
       "version": "5.5.3",
       "resolved": "https://repo.bingosoft.net/repository/npm/typescript/-/typescript-5.5.3.tgz",
@@ -3032,6 +3231,22 @@
         "vue": "^3.2.2"
       }
     },
+    "node_modules/vue-draggable-plus": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/vue-draggable-plus/-/vue-draggable-plus-0.5.2.tgz",
+      "integrity": "sha512-+EWOYOtY6MVbhPpG+H4rjyuWAJiQU2VoLI/ehOCZkz62anrKrGHz5CBL2HDXi01hpNSP9BTDgkBcibhdO9/Jgg==",
+      "dependencies": {
+        "@types/sortablejs": "^1.15.8"
+      },
+      "peerDependencies": {
+        "@types/sortablejs": "^1.15.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://repo.bingosoft.net/repository/npm/vue-loader/-/vue-loader-17.4.2.tgz",
@@ -3630,6 +3845,11 @@
         "undici-types": "~5.26.4"
       }
     },
+    "@types/sortablejs": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg=="
+    },
     "@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://repo.bingosoft.net/repository/npm/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -4170,6 +4390,15 @@
       "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://repo.bingosoft.net/repository/npm/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "csstype": {
       "version": "3.1.3",
       "resolved": "https://repo.bingosoft.net/repository/npm/csstype/-/csstype-3.1.3.tgz",
@@ -4287,6 +4516,16 @@
       "resolved": "https://repo.bingosoft.net/repository/npm/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
     },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://repo.bingosoft.net/repository/npm/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
     "es-module-lexer": {
       "version": "1.5.4",
       "resolved": "https://repo.bingosoft.net/repository/npm/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
@@ -4483,6 +4722,23 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://repo.bingosoft.net/repository/npm/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      }
+    },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://repo.bingosoft.net/repository/npm/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true
+    },
     "immutable": {
       "version": "4.3.6",
       "resolved": "https://repo.bingosoft.net/repository/npm/immutable/-/immutable-4.3.6.tgz",
@@ -4519,6 +4775,12 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "jest-worker": {
       "version": "27.5.1",
       "resolved": "https://repo.bingosoft.net/repository/npm/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -4563,6 +4825,24 @@
       "dev": true,
       "peer": true
     },
+    "less": {
+      "version": "4.2.0",
+      "resolved": "https://repo.bingosoft.net/repository/npm/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      }
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://repo.bingosoft.net/repository/npm/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -4582,7 +4862,7 @@
     },
     "lodash": {
       "version": "4.17.21",
-      "resolved": "https://repo.bingosoft.net/repository/npm/lodash/-/lodash-4.17.21.tgz",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash-es": {
@@ -4596,6 +4876,11 @@
       "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
       "requires": {}
     },
+    "lsp-uuid": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/lsp-uuid/-/lsp-uuid-3.2.0.tgz",
+      "integrity": "sha512-onsO1mGkAobJq1IYGZcuqBb3cTY/N/EmNKN8ovXFKEpkjWQxHfmTOqDm/SLZ14pLimC5Qfd5sfMpRCx5N6+OMQ=="
+    },
     "magic-string": {
       "version": "0.30.10",
       "resolved": "https://repo.bingosoft.net/repository/npm/magic-string/-/magic-string-0.30.10.tgz",
@@ -4604,6 +4889,26 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://repo.bingosoft.net/repository/npm/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://repo.bingosoft.net/repository/npm/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "memoize-one": {
       "version": "6.0.0",
       "resolved": "https://repo.bingosoft.net/repository/npm/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -4632,6 +4937,13 @@
         "picomatch": "^2.3.1"
       }
     },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://repo.bingosoft.net/repository/npm/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "optional": true
+    },
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://repo.bingosoft.net/repository/npm/mime-db/-/mime-db-1.52.0.tgz",
@@ -4687,6 +4999,17 @@
       "resolved": "https://repo.bingosoft.net/repository/npm/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
+    "needle": {
+      "version": "3.3.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      }
+    },
     "neo-async": {
       "version": "2.6.2",
       "resolved": "https://repo.bingosoft.net/repository/npm/neo-async/-/neo-async-2.6.2.tgz",
@@ -4712,6 +5035,12 @@
       "resolved": "https://repo.bingosoft.net/repository/npm/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
     "path-browserify": {
       "version": "1.0.1",
       "resolved": "https://repo.bingosoft.net/repository/npm/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -4735,6 +5064,13 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true
+    },
     "pkg-types": {
       "version": "1.1.3",
       "resolved": "https://repo.bingosoft.net/repository/npm/pkg-types/-/pkg-types-1.1.3.tgz",
@@ -4756,6 +5092,13 @@
         "source-map-js": "^1.2.0"
       }
     },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "punycode": {
       "version": "2.3.1",
       "resolved": "https://repo.bingosoft.net/repository/npm/punycode/-/punycode-2.3.1.tgz",
@@ -4836,6 +5179,13 @@
       "dev": true,
       "peer": true
     },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://repo.bingosoft.net/repository/npm/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "optional": true
+    },
     "sass": {
       "version": "1.77.8",
       "resolved": "https://repo.bingosoft.net/repository/npm/sass/-/sass-1.77.8.tgz",
@@ -4847,6 +5197,13 @@
         "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
+    "sax": {
+      "version": "1.4.1",
+      "resolved": "https://repo.bingosoft.net/repository/npm/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "dev": true,
+      "optional": true
+    },
     "schema-utils": {
       "version": "3.3.0",
       "resolved": "https://repo.bingosoft.net/repository/npm/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -4891,8 +5248,7 @@
       "version": "0.6.1",
       "resolved": "https://repo.bingosoft.net/repository/npm/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "source-map-js": {
       "version": "1.2.0",
@@ -4971,6 +5327,12 @@
         "is-number": "^7.0.0"
       }
     },
+    "tslib": {
+      "version": "2.6.3",
+      "resolved": "https://repo.bingosoft.net/repository/npm/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "dev": true
+    },
     "typescript": {
       "version": "5.5.3",
       "resolved": "https://repo.bingosoft.net/repository/npm/typescript/-/typescript-5.5.3.tgz",
@@ -5125,6 +5487,14 @@
       "integrity": "sha512-EAMS1IRHF0kZO0o5PMOinsQsXIqsrKT1hKmbICxG3UEtn7zLFkLxlAtajcCcUTisNvQ6TtCB5COjD9a1raNADw==",
       "requires": {}
     },
+    "vue-draggable-plus": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/vue-draggable-plus/-/vue-draggable-plus-0.5.2.tgz",
+      "integrity": "sha512-+EWOYOtY6MVbhPpG+H4rjyuWAJiQU2VoLI/ehOCZkz62anrKrGHz5CBL2HDXi01hpNSP9BTDgkBcibhdO9/Jgg==",
+      "requires": {
+        "@types/sortablejs": "^1.15.8"
+      }
+    },
     "vue-loader": {
       "version": "17.4.2",
       "resolved": "https://repo.bingosoft.net/repository/npm/vue-loader/-/vue-loader-17.4.2.tgz",
diff --git a/package.json b/package.json
index 27e9125..afcca5f 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,15 @@
   "dependencies": {
     "@vueuse/core": "^10.11.0",
     "element-plus": "^2.7.8",
+    "lodash": "^4.17.21",
+    "lsp-uuid": "^3.2.0",
     "vue": "^3.2.25",
-    "vue-draggable-next": "^2.2.1"
+    "vue-draggable-next": "^2.2.1",
+    "vue-draggable-plus": "^0.5.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
+    "less": "^4.2.0",
     "sass": "^1.77.8",
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.18.2",
diff --git a/src/components/MyComponent1.vue b/src/components/MyComponent1.vue
new file mode 100644
index 0000000..b18d82f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/MyComponent2.vue b/src/components/MyComponent2.vue
new file mode 100644
index 0000000..d2ac3cc
--- /dev/null
+++ b/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>
diff --git a/src/components/MyComponent3.vue b/src/components/MyComponent3.vue
new file mode 100644
index 0000000..aba7ca0
--- /dev/null
+++ b/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>
diff --git a/src/components/VueDemo.vue b/src/components/VueDemo.vue
index 7e8a1f3..5c126c6 100644
--- a/src/components/VueDemo.vue
+++ b/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>
\ No newline at end of file
+</script>