@tmagic/editor 1.0.6 → 1.1.0-beta.2

package/dist/tmagic-editor.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController, global.StageCore));
-})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, Gesto, elementPlus, KeyController, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons-vue'), require('lodash-es'), require('monaco-editor'), require('@tmagic/stage'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons-vue', 'lodash-es', 'monaco-editor', '@tmagic/stage', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.iconsVue, global.lodashEs, global.monaco, global.StageCore, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController));
+})(this, (function (exports, vue, serialize, iconsVue, lodashEs, monaco, StageCore, schema, utils, events, core, Gesto, elementPlus, KeyController) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,9 +26,9 @@
 
   var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
   var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+  var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
   var Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
   var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
-  var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
 
   if (typeof global === "undefined") {
     window.global = window;
@@ -179,9 +179,9 @@
         }
       };
       return {
-        Delete: vue.markRaw(icons.Delete),
-        Pointer: vue.markRaw(icons.Pointer),
-        Close: vue.markRaw(icons.Close),
+        Delete: vue.markRaw(iconsVue.Delete),
+        Pointer: vue.markRaw(iconsVue.Pointer),
+        Close: vue.markRaw(iconsVue.Close),
         val,
         uiSelectMode,
         toName: vue.computed(() => {
@@ -768,56 +768,50 @@
     const items = parent?.items || [];
     return items.findIndex((item) => `${item.id}` === `${node.id}`);
   };
-  const toRelative = (node) => {
-    node.style = {
-      ...node.style || {},
-      position: "relative",
-      top: 0,
-      left: 0
-    };
-    return node;
-  };
-  const setTop2Middle = (node, parentNode, stage) => {
-    const style = node.style || {};
+  const getRelativeStyle = (style = {}) => ({
+    ...style,
+    position: "relative",
+    top: 0,
+    left: 0
+  });
+  const getMiddleTop = (style = {}, parentNode, stage) => {
     let height = style.height || 0;
     if (!stage || typeof style.top !== "undefined" || !parentNode.style)
-      return style;
+      return style.top;
     if (!utils.isNumber(height)) {
       height = 0;
     }
     const { height: parentHeight } = parentNode.style;
     if (utils.isPage(parentNode)) {
       const { scrollTop = 0, wrapperHeight } = stage.mask;
-      style.top = (wrapperHeight - height) / 2 + scrollTop;
-    } else {
-      style.top = (parentHeight - height) / 2;
+      return (wrapperHeight - height) / 2 + scrollTop;
     }
-    return style;
+    return (parentHeight - height) / 2;
   };
-  const initPosition = (node, layout, parentNode, stage) => {
+  const getInitPositionStyle = (style = {}, layout, parentNode, stage) => {
     if (layout === Layout.ABSOLUTE) {
-      node.style = {
+      return {
+        ...style,
         position: "absolute",
-        ...setTop2Middle(node, parentNode, stage)
+        top: getMiddleTop(style, parentNode, stage)
       };
-      return node;
     }
     if (layout === Layout.RELATIVE) {
-      return toRelative(node);
+      return getRelativeStyle(style);
     }
-    return node;
+    return style;
   };
   const setLayout = (node, layout) => {
     node.items?.forEach((child) => {
       if (utils.isPop(child))
         return;
-      child.style = child.style || {};
-      if (child.style.position === "fixed")
+      const style = child.style || {};
+      if (style.position === "fixed")
         return;
       if (layout !== Layout.RELATIVE) {
-        child.style.position = "absolute";
+        style.position = "absolute";
       } else {
-        toRelative(child);
+        child.style = getRelativeStyle(style);
         child.style.right = "auto";
         child.style.bottom = "auto";
       }
@@ -834,11 +828,10 @@
       offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
       offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
     });
-    node.style = {
+    return {
       ...node.style || {},
       ...offset
     };
-    return node;
   };
   const Fixed2Other = async (node, root, getLayout) => {
     const path = utils.getNodePath(node.id, root.items);
@@ -853,20 +846,20 @@
       offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
       offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
     });
+    const style = node.style || {};
     const parent = path.pop();
     if (!parent) {
-      return toRelative(node);
+      return getRelativeStyle(style);
     }
     const layout = await getLayout(parent);
     if (layout !== Layout.RELATIVE) {
-      node.style = {
-        ...node.style || {},
+      return {
+        ...style,
         ...offset,
         position: "absolute"
       };
-      return node;
     }
-    return toRelative(node);
+    return getRelativeStyle(style);
   };
   const getGuideLineFromCache = (key) => {
     if (!key)
@@ -881,6 +874,16 @@
     }
     return [];
   };
+  const fixNodeLeft = (config, parent, doc) => {
+    if (!doc || !config.style || !utils.isNumber(config.style.left))
+      return config.style?.left;
+    const el = doc.getElementById(`${config.id}`);
+    const parentEl = doc.getElementById(`${parent.id}`);
+    if (el && parentEl && el.offsetWidth + config.style?.left > parentEl.offsetWidth) {
+      return parentEl.offsetWidth - el.offsetWidth;
+    }
+    return config.style.left;
+  };
 
   const log = (...args) => {
   };
@@ -906,6 +909,7 @@
         "paste",
         "alignCenter",
         "moveLayer",
+        "moveToContainer",
         "move",
         "undo",
         "redo",
@@ -1045,13 +1049,22 @@
       if (!parentNode)
         throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
       const layout = await this.getLayout(vue.toRaw(parentNode), addNode);
-      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
+      const newNode = { ...vue.toRaw(await propsService.getPropsValue(type, config2)) };
+      newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, this.get("stage"));
       if ((parentNode?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && newNode.type !== schema.NodeType.PAGE) {
         throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
       }
       parentNode?.items?.push(newNode);
       const stage = this.get("stage");
-      await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(this.get("root")) });
+      const root = this.get("root");
+      await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(root) });
+      if (layout === Layout.ABSOLUTE) {
+        const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
+        if (typeof fixedLeft !== "undefined") {
+          newNode.style.left = fixedLeft;
+          await stage?.update({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(root) });
+        }
+      }
       await this.select(newNode);
       this.addModifiedNodeId(newNode.id);
       if (!isPage2) {
@@ -1078,7 +1091,7 @@
         throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
       parent.items?.splice(index, 1);
       const stage = this.get("stage");
-      stage?.remove({ id: node.id, root: this.get("root") });
+      stage?.remove({ id: node.id, root: lodashEs.cloneDeep(this.get("root")) });
       if (node.type === schema.NodeType.PAGE) {
         this.state.pageLength -= 1;
         if (root.items[0]) {
@@ -1139,7 +1152,7 @@
       if (`${newConfig.id}` === `${this.get("node").id}`) {
         this.set("node", newConfig);
       }
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: this.get("root") });
+      this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: lodashEs.cloneDeep(this.get("root")) });
       if (newConfig.type === schema.NodeType.PAGE) {
         this.set("page", newConfig);
       }
@@ -1158,7 +1171,7 @@
       parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
       await this.update(parent);
       await this.select(node);
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(node), root: this.get("root") });
+      this.get("stage")?.update({ config: lodashEs.cloneDeep(node), root: lodashEs.cloneDeep(this.get("root")) });
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
     }
@@ -1210,7 +1223,10 @@
         node.style.left = (parent.style.width - node.style.width) / 2;
       }
       await this.update(node);
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(vue.toRaw(node)), root: this.get("root") });
+      this.get("stage")?.update({
+        config: lodashEs.cloneDeep(vue.toRaw(node)),
+        root: lodashEs.cloneDeep(this.get("root"))
+      });
       this.addModifiedNodeId(config2.id);
       this.pushHistoryState();
       return config2;
@@ -1227,7 +1243,37 @@
       } else {
         brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
       }
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(vue.toRaw(parent)), root: this.get("root") });
+      this.get("stage")?.update({
+        config: lodashEs.cloneDeep(vue.toRaw(parent)),
+        root: lodashEs.cloneDeep(this.get("root"))
+      });
+    }
+    async moveToContainer(config2, targetId) {
+      const { node, parent } = this.getNodeInfo(config2.id, false);
+      const target = this.getNodeById(targetId, false);
+      const stage = this.get("stage");
+      if (node && parent && stage) {
+        const root = lodashEs.cloneDeep(this.get("root"));
+        const index = getNodeIndex(node, parent);
+        parent.items?.splice(index, 1);
+        await stage.remove({ id: node.id, root });
+        const layout = await this.getLayout(target);
+        const newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), config2, (objValue, srcValue) => {
+          if (Array.isArray(srcValue)) {
+            return srcValue;
+          }
+        });
+        newConfig.style = getInitPositionStyle(newConfig.style, layout, target, stage);
+        target.items.push(newConfig);
+        await stage.select(targetId);
+        await stage.update({ config: lodashEs.cloneDeep(target), root });
+        await this.select(newConfig);
+        stage.select(newConfig.id);
+        this.addModifiedNodeId(target.id);
+        this.addModifiedNodeId(parent.id);
+        this.pushHistoryState();
+        return newConfig;
+      }
     }
     async undo() {
       const value = historyService.undo();
@@ -1299,12 +1345,12 @@
       }, 0);
     }
     async toggleFixedPosition(dist, src, root) {
-      let newConfig = lodashEs.cloneDeep(dist);
+      const newConfig = lodashEs.cloneDeep(dist);
       if (!utils.isPop(src) && newConfig.style?.position) {
         if (isFixed(newConfig) && !isFixed(src)) {
-          newConfig = change2Fixed(newConfig, root);
+          newConfig.style = change2Fixed(newConfig, root);
         } else if (!isFixed(newConfig) && isFixed(src)) {
-          newConfig = await Fixed2Other(newConfig, root, this.getLayout);
+          newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
         }
       }
       return newConfig;
@@ -1597,7 +1643,7 @@
   };
 
   const _sfc_main$i = vue.defineComponent({
-    components: { Plus: icons.Plus },
+    components: { Plus: iconsVue.Plus },
     setup() {
       const services = vue.inject("services");
       return {
@@ -1777,7 +1823,7 @@
 
   const _sfc_main$f = vue.defineComponent({
     name: "m-icon",
-    components: { Edit: icons.Edit },
+    components: { Edit: iconsVue.Edit },
     props: {
       icon: {
         type: [String, Object]
@@ -1814,7 +1860,7 @@
   var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
   const _sfc_main$e = vue.defineComponent({
-    components: { MIcon, ArrowDown: icons.ArrowDown },
+    components: { MIcon, ArrowDown: iconsVue.ArrowDown },
     props: {
       data: {
         type: [Object, String],
@@ -1853,7 +1899,7 @@
           case "delete":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Delete),
+              icon: vue.markRaw(iconsVue.Delete),
               tooltip: "\u522A\u9664",
               disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
               handler: () => services?.editorService.remove(services?.editorService.get("node"))
@@ -1861,7 +1907,7 @@
           case "undo":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Back),
+              icon: vue.markRaw(iconsVue.Back),
               tooltip: "\u540E\u9000",
               disabled: () => !services?.historyService.state.canUndo,
               handler: () => services?.editorService.undo()
@@ -1869,7 +1915,7 @@
           case "redo":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Right),
+              icon: vue.markRaw(iconsVue.Right),
               tooltip: "\u524D\u8FDB",
               disabled: () => !services?.historyService.state.canRedo,
               handler: () => services?.editorService.redo()
@@ -1877,28 +1923,28 @@
           case "zoom-in":
             return {
               type: "button",
-              icon: vue.markRaw(icons.ZoomIn),
+              icon: vue.markRaw(iconsVue.ZoomIn),
               tooltip: "\u653E\u5927",
               handler: zoomInHandler
             };
           case "zoom-out":
             return {
               type: "button",
-              icon: vue.markRaw(icons.ZoomOut),
+              icon: vue.markRaw(iconsVue.ZoomOut),
               tooltip: "\u7E2E\u5C0F",
               handler: zoomOutHandler
             };
           case "rule":
             return {
               type: "button",
-              icon: vue.markRaw(icons.ScaleToOriginal),
+              icon: vue.markRaw(iconsVue.ScaleToOriginal),
               tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
               handler: () => uiService?.set("showRule", !showRule.value)
             };
           case "guides":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Grid),
+              icon: vue.markRaw(iconsVue.Grid),
               tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
               handler: () => uiService?.set("showGuides", !showGuides.value)
             };
@@ -1927,8 +1973,8 @@
         }
       };
       return {
-        ZoomIn: vue.markRaw(icons.ZoomIn),
-        ZoomOut: vue.markRaw(icons.ZoomOut),
+        ZoomIn: vue.markRaw(iconsVue.ZoomIn),
+        ZoomOut: vue.markRaw(iconsVue.ZoomOut),
         item,
         zoom,
         disabled,
@@ -2208,11 +2254,16 @@
     setup() {
       const searchText = vue.ref("");
       const services = vue.inject("services");
+      const stageOptions = vue.inject("stageOptions");
+      const stage = vue.computed(() => services?.editorService.get("stage"));
       const list = vue.computed(() => services?.componentListService.getList().map((group) => ({
         ...group,
         items: group.items.filter((item) => item.text.includes(searchText.value))
       })));
       const collapseValue = vue.computed(() => Array(list.value?.length).fill(1).map((x, i) => i));
+      let timeout;
+      let clientX;
+      let clientY;
       return {
         searchText,
         collapseValue,
@@ -2233,6 +2284,43 @@
               ...data
             }).replace(/"(\w+)":\s/g, "$1: "));
           }
+        },
+        dragendHandler() {
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+            timeout = void 0;
+          }
+          const doc = stage.value?.renderer.contentWindow?.document;
+          if (doc && stageOptions) {
+            utils.removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+          }
+          clientX = 0;
+          clientY = 0;
+        },
+        dragHandler(e) {
+          if (e.clientX !== clientX || e.clientY !== clientY) {
+            clientX = e.clientX;
+            clientY = e.clientY;
+            if (timeout) {
+              globalThis.clearTimeout(timeout);
+              timeout = void 0;
+            }
+            return;
+          }
+          if (timeout)
+            return;
+          timeout = globalThis.setTimeout(async () => {
+            if (!stageOptions || !stage.value)
+              return;
+            const doc = stage.value.renderer.contentWindow?.document;
+            const els = stage.value.getElementsFromPoint(e);
+            for (const el of els) {
+              if (doc && !el.id.startsWith(StageCore.GHOST_EL_ID_PREFIX) && await stageOptions.isContainer(el)) {
+                utils.addClassName(el, doc, stageOptions?.containerHighlightClassName);
+                break;
+              }
+            }
+          }, stageOptions?.containerHighlightDuration);
         }
       };
     }
@@ -2280,7 +2368,9 @@
                         draggable: "true",
                         key: item.type,
                         onClick: ($event) => _ctx.appendComponent(item),
-                        onDragstart: ($event) => _ctx.dragstartHandler(item, $event)
+                        onDragstart: ($event) => _ctx.dragstartHandler(item, $event),
+                        onDragend: _cache[1] || (_cache[1] = (...args) => _ctx.dragendHandler && _ctx.dragendHandler(...args)),
+                        onDrag: _cache[2] || (_cache[2] = (...args) => _ctx.dragHandler && _ctx.dragHandler(...args))
                       }, [
                         vue.createVNode(_component_m_icon, {
                           icon: item.icon
@@ -2461,7 +2551,7 @@
             {
               text: "\u6807\u7B7E\u9875",
               type: "button",
-              icon: icons.Files,
+              icon: iconsVue.Files,
               handler: () => {
                 services?.editorService.add({
                   type: "tab-pane"
@@ -2486,14 +2576,14 @@
           {
             type: "button",
             text: "\u65B0\u589E",
-            icon: vue.markRaw(icons.Plus),
+            icon: vue.markRaw(iconsVue.Plus),
             display: () => node.value?.items,
             items: getSubMenuData.value
           },
           {
             type: "button",
             text: "\u590D\u5236",
-            icon: vue.markRaw(icons.DocumentCopy),
+            icon: vue.markRaw(iconsVue.DocumentCopy),
             display: () => !isRoot.value,
             handler: () => {
               node.value && services?.editorService.copy(node.value);
@@ -2502,7 +2592,7 @@
           {
             type: "button",
             text: "\u5220\u9664",
-            icon: vue.markRaw(icons.Delete),
+            icon: vue.markRaw(iconsVue.Delete),
             display: () => !isRoot.value && !isPage.value,
             handler: () => {
               node.value && services?.editorService.remove(node.value);
@@ -2745,7 +2835,7 @@
             case "component-list":
               return {
                 type: "component",
-                icon: icons.Coin,
+                icon: iconsVue.Coin,
                 text: "\u7EC4\u4EF6",
                 component: ComponentListPanel,
                 slots: {}
@@ -2753,7 +2843,7 @@
             case "layer":
               return {
                 type: "component",
-                icon: icons.Files,
+                icon: iconsVue.Files,
                 text: "\u5DF2\u9009\u7EC4\u4EF6",
                 component: LayerPanel,
                 slots: {}
@@ -2938,14 +3028,14 @@
     };
   };
   const _sfc_main$5 = vue.defineComponent({
-    components: { ArrowLeftBold: icons.ArrowLeftBold, ArrowRightBold: icons.ArrowRightBold, CaretBottom: icons.CaretBottom, Plus: icons.Plus, ToolButton },
+    components: { ArrowLeftBold: iconsVue.ArrowLeftBold, ArrowRightBold: iconsVue.ArrowRightBold, CaretBottom: iconsVue.CaretBottom, Plus: iconsVue.Plus, ToolButton },
     setup() {
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const root = vue.computed(() => editorService?.get("root"));
       return {
-        Delete: vue.markRaw(icons.Delete),
-        DocumentCopy: vue.markRaw(icons.DocumentCopy),
+        Delete: vue.markRaw(iconsVue.Delete),
+        DocumentCopy: vue.markRaw(iconsVue.DocumentCopy),
         ...useScroll(root),
         root,
         page: vue.computed(() => editorService?.get("page")),
@@ -3350,7 +3440,7 @@
           {
             type: "button",
             text: "\u590D\u5236",
-            icon: vue.markRaw(icons.DocumentCopy),
+            icon: vue.markRaw(iconsVue.DocumentCopy),
             handler: () => {
               node.value && editorService?.copy(node.value);
               canPaste.value = true;
@@ -3383,7 +3473,7 @@
           {
             type: "button",
             text: "\u4E0A\u79FB\u4E00\u5C42",
-            icon: vue.markRaw(icons.Top),
+            icon: vue.markRaw(iconsVue.Top),
             display: () => !isPage.value,
             handler: () => {
               editorService?.moveLayer(1);
@@ -3392,7 +3482,7 @@
           {
             type: "button",
             text: "\u4E0B\u79FB\u4E00\u5C42",
-            icon: vue.markRaw(icons.Bottom),
+            icon: vue.markRaw(iconsVue.Bottom),
             display: () => !isPage.value,
             handler: () => {
               editorService?.moveLayer(-1);
@@ -3422,7 +3512,7 @@
           {
             type: "button",
             text: "\u5220\u9664",
-            icon: icons.Delete,
+            icon: iconsVue.Delete,
             display: () => !isPage.value,
             handler: () => {
               node.value && editorService?.remove(node.value);
@@ -3489,6 +3579,9 @@
           runtimeUrl: stageOptions.runtimeUrl,
           zoom: zoom.value,
           autoScrollIntoView: stageOptions.autoScrollIntoView,
+          isContainer: stageOptions.isContainer,
+          containerHighlightClassName: stageOptions.containerHighlightClassName,
+          containerHighlightDuration: stageOptions.containerHighlightDuration,
           canSelect: (el, event, stop) => {
             const elCanSelect = stageOptions.canSelect(el);
             if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
@@ -3513,6 +3606,10 @@
           services?.editorService.highlight(el.id);
         });
         stage?.on("update", (ev) => {
+          if (ev.parentEl) {
+            services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
+            return;
+          }
           services?.editorService.update({ id: ev.el.id, style: ev.style });
         });
         stage?.on("sort", (ev) => {
@@ -3584,20 +3681,38 @@
         },
         async dropHandler(e) {
           e.preventDefault();
-          if (e.dataTransfer && page.value && stageContainer.value && stage) {
+          const doc = stage?.renderer.contentWindow?.document;
+          const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+          let parent = page.value;
+          if (parentEl) {
+            parent = services?.editorService.getNodeById(parentEl.id, false);
+          }
+          if (e.dataTransfer && parent && stageContainer.value && stage) {
             const config = eval(`(${e.dataTransfer.getData("data")})`);
-            const layout = await services?.editorService.getLayout(page.value);
+            const layout = await services?.editorService.getLayout(parent);
             const containerRect = stageContainer.value.getBoundingClientRect();
             const { scrollTop, scrollLeft } = stage.mask;
+            const { style = {} } = config;
+            let top = 0;
+            let left = 0;
+            let position = "relative";
             if (layout === Layout.ABSOLUTE) {
-              config.style = {
-                ...config.style || {},
-                position: "absolute",
-                top: e.clientY - containerRect.top + scrollTop,
-                left: e.clientX - containerRect.left + scrollLeft
-              };
+              position = "absolute";
+              top = e.clientY - containerRect.top + scrollTop;
+              left = e.clientX - containerRect.left + scrollLeft;
+              if (parentEl && doc) {
+                const { left: parentLeft, top: parentTop } = StageCore.getOffset(parentEl);
+                left = left - StageCore.calcValueByFontsize(doc, parentLeft);
+                top = top - StageCore.calcValueByFontsize(doc, parentTop);
+              }
             }
-            services?.editorService.add(config, page.value);
+            config.style = {
+              ...style,
+              position,
+              top,
+              left
+            };
+            services?.editorService.add(config, parent);
           }
         }
       };
@@ -3958,6 +4073,18 @@
         type: Function,
         default: (el) => Boolean(el.id)
       },
+      isContainer: {
+        type: Function,
+        default: (el) => el.classList.contains("magic-ui-container")
+      },
+      containerHighlightClassName: {
+        type: String,
+        default: StageCore.CONTAINER_HIGHLIGHT_CLASS
+      },
+      containerHighlightDuration: {
+        type: Number,
+        default: 800
+      },
       stageRect: {
         type: [String, Object]
       },
@@ -4024,7 +4151,10 @@
         render: props.render,
         moveableOptions: props.moveableOptions,
         canSelect: props.canSelect,
-        updateDragEl: props.updateDragEl
+        updateDragEl: props.updateDragEl,
+        isContainer: props.isContainer,
+        containerHighlightClassName: props.containerHighlightClassName,
+        containerHighlightDuration: props.containerHighlightDuration
       }));
       return services;
     }
@@ -4128,23 +4258,24 @@
   exports.error = error;
   exports.eventsService = eventsService;
   exports.fillConfig = fillConfig;
+  exports.fixNodeLeft = fixNodeLeft;
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getConfig = getConfig;
   exports.getDefaultPropsValue = getDefaultPropsValue;
   exports.getGuideLineFromCache = getGuideLineFromCache;
+  exports.getInitPositionStyle = getInitPositionStyle;
   exports.getNodeIndex = getNodeIndex;
   exports.getPageList = getPageList;
   exports.getPageNameList = getPageNameList;
+  exports.getRelativeStyle = getRelativeStyle;
   exports.historyService = historyService;
   exports.info = info;
-  exports.initPosition = initPosition;
   exports.isFixed = isFixed;
   exports.log = log;
   exports.propsService = propsService;
   exports.setConfig = setConfig;
   exports.setLayout = setLayout;
-  exports.toRelative = toRelative;
   exports.uiService = uiService;
   exports.warn = warn;