vue拖拽图片

这是我封装的组件大家直接用就好

我的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>
  <!-- 图片 -->
  <Draggable
    imgSrc="/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>
  <div
    style="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>