Prevent top/left update if not in standard drag mode

src/commands/view/SelectComponent.ts

@@ -455,8 +455,10 @@ export default {
             style[keyHeight] = autoHeight ? 'auto' : `${rect.h}${unitHeight}`;
           }
 
-          style.top = rect.t + unitHeight;
+          if (em.getDragMode(model)) {
-          style.left = rect.l + unitWidth;
+            style.top = `${rect.t}${unitHeight}`;
+            style.left = `${rect.l}${unitWidth}`;
+          }
 
           modelToStyle.addStyle({ ...style, en }, { avoidStore: !store });
           const updateEvent = 'update:component:style';

src/dom_components/model/Component.ts

@@ -351,13 +351,21 @@ export default class Component extends StyleableModel<ComponentProperties> {
   /**
    * Change the drag mode of the component.
    * To get more about this feature read: https://github.com/GrapesJS/grapesjs/issues/1936
-   * @param {String} value Drag mode, options: 'absolute' | 'translate'
+   * @param {String} value Drag mode, options: `'absolute'` | `'translate'` | `''`
    * @returns {this}
    */
   setDragMode(value?: DragMode) {
     return this.set('dmode', value);
   }
 
+  /**
+   * Get the drag mode of the component.
+   * @returns {String} Drag mode value, options: `'absolute'` | `'translate'` | `''`
+   */
+  getDragMode(): DragMode {
+    return this.get('dmode') || '';
+  }
+
   /**
    * Find inner components by query string.
    * **ATTENTION**: this method works only with already rendered component

src/dom_components/model/types.ts

@@ -9,7 +9,7 @@ import Component from './Component';
 import Components from './Components';
 import { ToolbarButtonProps } from './ToolbarButton';
 
-export type DragMode = 'translate' | 'absolute';
+export type DragMode = 'translate' | 'absolute' | '';
 
 export interface ComponentProperties {
   /**

src/editor/index.ts

@@ -69,6 +69,7 @@ import ComponentManager, { ComponentEvent } from '../dom_components';
 import Component from '../dom_components/model/Component';
 import Components from '../dom_components/model/Components';
 import ComponentWrapper from '../dom_components/model/ComponentWrapper';
+import { DragMode } from '../dom_components/model/types';
 import I18nModule from '../i18n';
 import KeymapsModule, { KeymapEvent } from '../keymaps';
 import ModalModule, { ModalEvent } from '../modal_dialog';
@@ -682,7 +683,7 @@ export default class Editor implements IBaseModule<EditorConfig> {
    * @param {String} value Drag mode, options: 'absolute' | 'translate'
    * @returns {this}
    */
-  setDragMode(value: string) {
+  setDragMode(value: DragMode) {
     this.em.setDragMode(value);
     return this;
   }

src/editor/model/Editor.ts

@@ -40,6 +40,7 @@ import ComponentView from '../../dom_components/view/ComponentView';
 import { ProjectData } from '../../storage_manager/model/IStorage';
 import CssRules from '../../css_composer/model/CssRules';
 import Frame from '../../canvas/model/Frame';
+import { DragMode } from '../../dom_components/model/types';
 
 Backbone.$ = $;
 
@@ -935,10 +936,15 @@ export default class EditorModel extends Model {
     return this.get('Canvas').getZoomMultiplier();
   }
 
-  setDragMode(value: string) {
+  setDragMode(value: DragMode) {
     return this.set('dmode', value);
   }
 
+  getDragMode(component?: Component): DragMode {
+    const mode = component?.getDragMode() || this.get('dmode');
+    return mode || '';
+  }
+
   t(...args: any[]) {
     const i18n = this.get('I18n');
     return i18n?.t(...args);
@@ -948,8 +954,8 @@ export default class EditorModel extends Model {
    * Returns true if the editor is in absolute mode
    * @returns {Boolean}
    */
-  inAbsoluteMode() {
+  inAbsoluteMode(component?: Component) {
-    return this.get('dmode') === 'absolute';
+    return this.getDragMode(component) === 'absolute';
   }
 
   /**