mouse事件设置拖拽目标图片

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

1. 获取要拖拽的图片元素，例如：

var dragImg = document.getElementById("drag-img");

2. 给图片元素添加mousedown事件监听器，当鼠标按下时开始拖拽，例如：

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

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