diff --git a/package.json b/package.json
index 5908446bf69e9a22104c7ed613cd118d6929c2ab..24bab76053743f3941e4cbc892fd7de400bf63d0 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
     "@types/keymaster": "^1.6.30",
+    "@types/lodash": "^4.14.184",
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",
     "color": "^4.2.3",
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 153dc6af91ff0dceb2e669d9d6e5ac05a8b450d2..8b80eced1902f1dfba7b8293c7e228b6b9547a81 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -63,7 +63,7 @@ export enum FilterEnum {
 export interface PublicConfigType {
   id: string
   isGroup: boolean
-  attr: { x: number; y: number; w: number; h: number; zIndex: number }
+  attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number; }
   styles: {
     [FilterEnum.OPACITY]: number
     [FilterEnum.SATURATE]: number
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index a285cf1387483f1f5a4a74d9136bb8189d19cfd1..ddccc09d8516d77ddf4988328877d2985aeace83 100644
--- a/src/packages/public/publicConfig.ts
+++ b/src/packages/public/publicConfig.ts
@@ -104,5 +104,5 @@ export class PublicGroupConfigClass extends publicConfig implements CreateCompon
   // 鏍囪瘑
   public id = getUUID()
   // 鍩烘湰淇℃伅
-  public attr = { w: 0, h: 0, x: 0, y: 0, zIndex: -1 }
+  public attr = { w: 0, h: 0, x: 0, y: 0, offsetX: 0, offsetY: 0, zIndex: -1 }
 }
diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts
index 56e2d6ad56413b653d74788a93905fac7e236246..b919db14f0ce7b2f97c3d455216973d1ee5c5a42 100644
--- a/src/settings/designSetting.ts
+++ b/src/settings/designSetting.ts
@@ -25,7 +25,10 @@ export const chartInitConfig = {
   x: 50,
   y: 50,
   w: 500,
-  h: 300
+  h: 300,
+  // 涓嶅缓璁姩 offset
+  offsetX: 0,
+  offsetY: 0,
 }
 
 // dialog 鍥炬爣鐨勫ぇ灏�
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index e8ebcaa3c6a7b9b7c05351e3ac9824056bc0c96b..68c77dec8b2f61241888fb4319fd1d371b173767 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -337,6 +337,28 @@ export const useChartEditStore = defineStore({
         loadingError()
       }
     },
+    // * 閲嶇疆缁勪欢浣嶇疆
+    resetComponentPosition(item: CreateComponentType | CreateComponentGroupType, isForward: boolean): void {
+      const index = this.fetchTargetIndex(item.id)
+      if (index > -1) {
+        const componentInstance = this.getComponentList[index]
+        if (isForward) {
+          componentInstance.attr = Object.assign(componentInstance.attr, {
+            x: item.attr.x + item.attr.offsetX,
+            y: item.attr.y + item.attr.offsetY
+          })
+        } else {
+          componentInstance.attr = Object.assign(componentInstance.attr, {
+            x: item.attr.x,
+            y: item.attr.y
+          })
+        }
+      }
+    },
+    // * 绉诲姩缁勪欢
+    moveComponentList(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      chartHistoryStore.createMoveHistory(item)
+    },
     // * 鏇存柊缁勪欢鍒楄〃鏌愪竴椤圭殑鍊�
     updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) {
       if (index < 1 && index > this.getComponentList.length) return
@@ -554,6 +576,15 @@ export const useChartEditStore = defineStore({
         return
       }
 
+      // 澶勭悊绉诲姩
+      const isMove = HistoryItem.actionType === HistoryActionTypeEnum.MOVE
+      if (isMove) {
+        historyData.forEach(item => {
+          this.resetComponentPosition(item, isForward)
+        })
+        return
+      }
+
       // 澶勭悊灞傜骇
       const isTop = HistoryItem.actionType === HistoryActionTypeEnum.TOP
       const isBottom = HistoryItem.actionType === HistoryActionTypeEnum.BOTTOM
@@ -586,12 +617,12 @@ export const useChartEditStore = defineStore({
       if (isGroup || isUnGroup) {
         if ((isGroup && isForward) || (isUnGroup && !isForward)) {
           const ids: string[] = []
-          if(historyData.length > 1) {
+          if (historyData.length > 1) {
             historyData.forEach(item => {
               ids.push(item.id)
             })
           } else {
-            (historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
+            ;(historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
               ids.push(item.id)
             })
           }
@@ -599,7 +630,7 @@ export const useChartEditStore = defineStore({
           return
         }
         // 閮介渶浣跨敤瀛愮粍浠剁殑id鍘昏В缁�
-        if(historyData.length > 1) {
+        if (historyData.length > 1) {
           this.setUnGroup([(historyData[0] as CreateComponentType).id], undefined, false)
         } else {
           this.setUnGroup([(historyData[0] as CreateComponentGroupType).groupList[0].id], undefined, false)
diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
index 21cd161f6d2d3111975e4099edc55a40ba75f1b7..e65f5c6d995c8210e59e59c441007642319b0440 100644
--- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
+++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
@@ -85,6 +85,8 @@ const canvasPositionList = computed(() => {
       h: cloneDeep(chartEditStore.getEditCanvasConfig.height),
       x: 0,
       y: 0,
+      offsetX: 0,
+      offsetY: 0,
       zIndex: 0
     }
   }
diff --git a/src/views/chart/ContentEdit/components/EditSelect/index.vue b/src/views/chart/ContentEdit/components/EditSelect/index.vue
index e307e1186883b68ef991975ac4e99e863dd99987..1a8df6c7487c00f73238f3c36f0511eed50664f4 100644
--- a/src/views/chart/ContentEdit/components/EditSelect/index.vue
+++ b/src/views/chart/ContentEdit/components/EditSelect/index.vue
@@ -41,7 +41,10 @@ watch(
       // 瀹�
       w: 0,
       // 楂�
-      h: 0
+      h: 0,
+      // 鍋忕Щ
+      offsetX: 0,
+      offsetY: 0
     }
 
     // 澶勭悊浣嶇疆
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index ed15914fad60c8368d9189123be62aa91504f07c..2e2218b682c0e6c7fe3ec51ad5a26b030d69df20 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -7,7 +7,7 @@ import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
-import throttle from 'lodash/throttle'
+import { throttle, cloneDeep } from 'lodash'
 
 const chartEditStore = useChartEditStore()
 const { onClickOutSide } = useContextMenu()
@@ -111,7 +111,7 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C
       selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale)
       selectAttr.y1 = startOffsetY
       selectAttr.x2 = startOffsetX
-      selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY ) / scale)
+      selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale)
       // 宸︿笅鏂瑰悜
     } else {
       // 宸︿笂鏂瑰悜
@@ -222,6 +222,16 @@ export const useMouseHandle = () => {
     const startX = e.screenX
     const startY = e.screenY
 
+    // 璁板綍鍘嗗彶浣嶇疆
+    let prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = []
+    chartEditStore.getTargetChart.selectId.forEach(id => {
+      if (!targetMap.has(id)) return
+
+      const index = chartEditStore.fetchTargetIndex(id)
+      // 鎷垮埌鍒濆浣嶇疆鏁版嵁
+      prevComponentInstance.push(cloneDeep(chartEditStore.getComponentList[index]))
+    })
+
     // 璁板綍鍒濆浣嶇疆
     chartEditStore.setMousePosition(undefined, undefined, startX, startY)
 
@@ -267,6 +277,24 @@ export const useMouseHandle = () => {
     const mouseup = () => {
       chartEditStore.setMousePosition(0, 0, 0, 0)
       chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
+      // 鍔犲叆鍘嗗彶鏍�
+      if (prevComponentInstance.length) {
+        chartEditStore.getTargetChart.selectId.forEach(id => {
+          if (!targetMap.has(id)) return
+          const index = chartEditStore.fetchTargetIndex(id)
+          const curComponentInstance = chartEditStore.getComponentList[index]
+          // 鎵惧埌璁板綍鐨勬墍閫夌粍浠�
+          prevComponentInstance.forEach(preItem => {
+            if (preItem.id === id) {
+              preItem.attr = Object.assign(preItem.attr, {
+                offsetX: curComponentInstance.attr.x - preItem.attr.x,
+                offsetY: curComponentInstance.attr.y - preItem.attr.y
+              })
+            }
+          })
+        })
+        chartEditStore.moveComponentList(prevComponentInstance)
+      }
       document.removeEventListener('mousemove', mousemove)
       document.removeEventListener('mouseup', mouseup)
     }