vue mouse事件设置拖拽目标图片

在Vue中实现拖拽目标图片的效果，可以使用以下步骤：

1. 在Vue组件中，使用`ref`属性获取要拖拽的图片元素，例如：

<template>
  <div>
    <img ref="dragImg" src="..." @mousedown="startDrag">
  </div>
</template>

2. 在Vue组件的methods中定义`startDrag`方法，当鼠标按下时开始拖拽，例如：

methods: {
  startDrag(event) {
    // 获取要拖拽的图片元素
    const dragImg = this.$refs.dragImg;
    
    // 记录鼠标按下时的坐标
    const startX = event.clientX;
    const startY = event.clientY;
    
    // 记录图片元素当前的偏移量
    const offsetX = dragImg.offsetLeft;
    const offsetY = dragImg.offsetTop;
    
    // 给document添加mousemove和mouseup事件监听器，开始拖拽
    document.addEventListener("mousemove", moveHandler);
    document.addEventListener("mouseup", upHandler);
    
    // 阻止默认的mousedown事件
    event.preventDefault();
    
    // 移动事件处理函数
    const moveHandler = (event) => {
      // 计算鼠标移动的偏移量
      const deltaX = event.clientX - startX;
      const deltaY = event.clientY - startY;
      
      // 设置图片元素的新位置
      dragImg.style.left = offsetX + deltaX + "px";
      dragImg.style.top = offsetY + deltaY + "px";
    };
    
    // 松开事件处理函数
    const upHandler = (event) => {
      // 移除事件监听器
      document.removeEventListener("mousemove", moveHandler);
      document.removeEventListener("mouseup", upHandler);
    };
  }
}

以上代码会在鼠标按下时记录鼠标位置和图片的偏移量，并且给document添加mousemove和mouseup事件监听器，当鼠标移动时设置图片的新位置，当鼠标松开时移除事件监听器。请注意，以上代码只实现了拖拽图片的基本功能，你可能还需要处理一些边界和交互细节。