diff --git a/src/main.ts b/src/main.ts index 7b427dcc..06ac37d9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -44,6 +44,7 @@ import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐 import VueDragResizeRotate from '@gausszhou/vue3-drag-resize-rotate' import '@gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' +import { vDrag } from './utils/drag'; // 创建实例 const setupAll = async () => { const app = createApp(App) @@ -67,7 +68,8 @@ const setupAll = async () => { setupMountedFocus(app) await router.isReady() - + // 注册全局指令 + app.directive('drag', vDrag); app.use(VueDOMPurifyHTML) app.use(VueDragResizeRotate) app.mount('#app') diff --git a/src/utils/drag.ts b/src/utils/drag.ts new file mode 100644 index 00000000..102d1a4f --- /dev/null +++ b/src/utils/drag.ts @@ -0,0 +1,31 @@ +// directives.js +export const vDrag = { + mounted(el) { + el.style.position = 'absolute'; + + let startX, startY, initialMouseX, initialMouseY; + + 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`; + }; + + const mouseup = () => { + document.removeEventListener('mousemove', mousemove); + document.removeEventListener('mouseup', mouseup); + }; + + 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(); + }); + } + +}; \ No newline at end of file diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue index 8c9a02f0..8c347ce3 100644 --- a/src/views/mapPage/realTimeMap/components/indexPage.vue +++ b/src/views/mapPage/realTimeMap/components/indexPage.vue @@ -1,5 +1,5 @@