增加drag.js

src/utils/drag.ts

@@ -1,31 +1,72 @@
 // directives.js
 export const vDrag = {
-  mounted(el) {
-    el.style.position = 'absolute';
+    mounted(el, binding) {
+        const enableDrag = binding.value; // 获取指令绑定的值
+        if (!enableDrag) return; // 如果为 false，则不执行后续拖拽逻辑
+        el.style.position = 'absolute';
 
-    let startX, startY, initialMouseX, initialMouseY;
+        // 记录元素的初始位置
+        const initialTop = el.offsetTop;
+        const initialLeft = el.offsetLeft;
 
-    const mousemove = (e) => {
-      const dx = e.clientX - initialMouseX;
-      const dy = e.clientY - initialMouseY;
-      el.style.top = `${startY + dy}px`;
-      el.style.left = `${startX + dx}px`;
-    };
+        let startX, startY, initialMouseX, initialMouseY;
 
-    const mouseup = () => {
-      document.removeEventListener('mousemove', mousemove);
-      document.removeEventListener('mouseup', mouseup);
-    };
+        const mousemove = (e) => {
+            const dx = e.clientX - initialMouseX;
+            const dy = e.clientY - initialMouseY;
+            el.style.top = `${startY + dy}px`;
+            el.style.left = `${startX + dx}px`;
+        };
 
-    el.addEventListener('mousedown', (e) => {
-      startX = el.offsetLeft;
-      startY = el.offsetTop;
-      initialMouseX = e.clientX;
-      initialMouseY = e.clientY;
-      document.addEventListener('mousemove', mousemove);
-      document.addEventListener('mouseup', mouseup);
-      e.preventDefault();
-    });
-  }
+        const mouseup = () => {
+            document.removeEventListener('mousemove', mousemove);
+            document.removeEventListener('mouseup', mouseup);
+        };
 
+        const mousedown = (e) => {
+            startX = el.offsetLeft;
+            startY = el.offsetTop;
+            initialMouseX = e.clientX;
+            initialMouseY = e.clientY;
+            document.addEventListener('mousemove', mousemove);
+            document.addEventListener('mouseup', mouseup);
+            e.preventDefault();
+        };
+
+        el.addEventListener('mousedown', mousedown);
+        // 保存 mousedown 事件处理函数，以便在 updated 中使用
+        el.__vDragMousedown = mousedown;
+        // 保存初始位置，以便后续还原
+        el.__vDragInitialTop = initialTop;
+        el.__vDragInitialLeft = initialLeft;
+    },
+    updated(el, binding) {
+        const enableDrag = binding.value;
+        const prevEnableDrag = binding.oldValue;
+
+        if (enableDrag && !prevEnableDrag) {
+            // 如果之前禁用，现在启用，添加 mousedown 事件监听器
+            el.addEventListener('mousedown', el.__vDragMousedown);
+        } else if (!enableDrag && prevEnableDrag) {
+            // 如果之前启用，现在禁用，移除 mousedown 事件监听器
+            el.removeEventListener('mousedown', el.__vDragMousedown);
+            // 确保在禁用时停止正在进行的拖拽
+            document.removeEventListener('mousemove', el.__vDragMousemove);
+            document.removeEventListener('mouseup', el.__vDragMouseup);
+        }
+    },
+    beforeUnmount(el) {
+        // 在元素卸载前移除 mousedown 事件监听器
+        if (el.__vDragMousedown) {
+            el.removeEventListener('mousedown', el.__vDragMousedown);
+        }
+    }
+};
+
+// 定义一个还原位置的函数
+export const resetDragPosition = (el) => {
+    if (el.__vDragInitialTop!== undefined && el.__vDragInitialLeft!== undefined) {
+        el.style.top = `${el.__vDragInitialTop}px`;
+        el.style.left = `${el.__vDragInitialLeft}px`;
+    }
 };

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="affix-container" :style="{ height: heightVal + 'px' }">
     <el-affix target=".affix-container" :offset="80">
+      <span @click="resetPosition ">回到原点</span>
       <div class="affix-container-top">
         <el-scrollbar>
           <div class="scrollbar-flex-content">
@@ -28,7 +29,7 @@
         </el-scrollbar>
       </div>
     </el-affix>
-    <div class="indexpage-container" v-if="imgUrl" v-drag>
+    <div class="indexpage-container" v-if="imgUrl" v-drag="true" :style="{scale:1,transformOrigin:'0 0'}"  ref="draggableElement">
       <div class="indexpage-container-box">
         <img :src="imgUrl" alt="" class="indexpage-container-box-img" />
 
@@ -121,7 +122,7 @@
                 <img :src="item.imgUrl" alt="" style="width: 100%; height: 100%" />
               </div>
             </div>
-            <div v-else style="width: 10px; height: 10px; border-radius: 50%; background: red">
+            <div v-else style="width: 10px; height: 10px; border-radius: 50%; background: #1890ff">
             </div>
           </div>
         </div>
@@ -137,7 +138,7 @@ import * as MapApi from '@/api/map/map'
 import WebSocketClient from '../webSocket.js'
 import storeDialog from './storeDialog.vue'
 import { color } from 'echarts'
-
+import {  resetDragPosition } from '@/utils/drag'
 const imgUrl = ref('')
 
 const socketClient = ref(null)
@@ -210,7 +211,12 @@ const getPositionMapListFun = async (positionMapId) => {
     }
   ]
 }
-
+const draggableElement = ref(null)
+const resetPosition = () => {
+    if (draggableElement.value) {
+        resetDragPosition(draggableElement.value);
+    }
+};
 const calculateDistanceAndAngle = (point1, point2) => {
   // 计算水平和垂直方向的差值
   const dx = point2.left - point1.left