这是我封装的组件大家直接用就好
我的gitee仓库地址 拖拽(父子) · 刘志辉/vue功能 - 码云 - 开源中国
//使用页面参考文档
//标签内
:imgSrc="'../img/tibet-1.jpg'" <!-- 设置图片路径 -->
@dragstart="handleDragStart" <!-- 监听拖拽开始位置事件 -->
@dragend="handleDragEnd" <!-- 监听拖拽结束位置事件 -->
//注意
如果使用的是 Vue CLI 或 Vite 来构建项目，../img/tibet-1.jpg 的相对路径可能会导致加载问题，特别是如果文件放在了 public 目录外。
解决方案：
推荐：将图片放在 public 目录中，public 文件夹中的内容会被自动拷贝到输出目录，路径从根目录开始引用。因此，你可以将图片放入 public 文件夹，然后使用 /img/tibet-1.jpg 路径来加载。
将图片放在 assets 文件夹并通过 require 或 import 引入： 如果图片存放在 src/assets 文件夹中，你可以使用 import 或 require 来导入图片。
:imgSrc自己把路径换成活的就好
目前支持的是传递单张图片以及拖拽
//使用页面
<template><!-- 图片 --><DraggableimgSrc="/img/tibet-5.jpg"@dragstart="handleDragStart"@dragend="handleDragEnd"/>
</template><script setup>
import Draggable from "../views/tz.vue"; // 引入 Draggable 组件
// 拖拽开始时触发的回调
function handleDragStart(event) {console.log("拖拽开始位置:", event); // 打印拖拽开始位置
}
// 拖拽结束时触发的回调
function handleDragEnd(event) {console.log("拖拽结束位置:", event); // 打印拖拽结束位置
}
</script>//组件页面
<template><divstyle="position: relative; width: 100%; height: 100vh; overflow: hidden"><img:src="props.imgSrc"alt="drag-image"class="drag_box mycss"draggable="true"@dragstart="dragstart"@dragend="dragend":style="{ left: `${elLeft}px`, top: `${elTop}px` }"/></div>
</template><script setup>
import { ref, defineProps, defineEmits } from "vue";// 接收父组件传入的参数（props）
const props = defineProps({imgSrc: String,
});// 定义事件
const emit = defineEmits();// 定义响应式变量
let elLeft = ref(40); // 左偏移量
let elTop = ref(40); // 上偏移量
let startPosition = ref({ x: 0, y: 0 }); // 记录拖拽开始时的鼠标位置
let isFirstDrag = ref(true); // 判断是否是首次拖拽
// 拖拽开始事件
function dragstart(e) {startPosition.value = { x: e.clientX, y: e.clientY }; // 记录开始时的鼠标位置e.target.style.transition = "none"; // 禁止拖拽时的过渡效果if (isFirstDrag.value) {// 首次拖拽时，计算初始位置const rect = e.target.getBoundingClientRect();elLeft.value = rect.left;elTop.value = rect.top;isFirstDrag.value = false; // 更新首次拖拽状态}e.target.classList.remove("mycss"); // 移除mycss类emit("dragstart", startPosition.value);
}// 拖拽结束事件
function dragend(e) {const deltaX = e.clientX - startPosition.value.x;const deltaY = e.clientY - startPosition.value.y;elLeft.value += deltaX; // 更新元素的左偏移量elTop.value += deltaY; // 更新元素的上偏移量emit("dragend", { x: elLeft.value, y: elTop.value });
}
</script><style scoped>
.drag_box {position: absolute;user-select: none;cursor: move;height: 70%;
}
.mycss {left: 50% !important;top: 50% !important;transform: translate(-50%, -50%);
}
</style>
