mouse事件设置拖拽目标图片

您可以通过以下步骤设置拖拽目标图片：

1. 首先，您需要为要拖拽的图片添加一个事件监听器，监听鼠标按下事件。例如，您可以使用以下代码：

var dragImg = document.getElementById("dragImg");
dragImg.addEventListener("mousedown", startDrag);

其中，`dragImg` 是要拖拽的图片的 DOM 元素，`startDrag` 是一个回调函数，用于处理鼠标按下事件。

2. 在 `startDrag` 函数中，您需要设置目标图片的拖拽效果。您可以使用 `setData` 方法设置拖拽数据，并使用 `setDragImage` 方法设置拖拽时的图片。例如，您可以使用以下代码：

function startDrag(event) {
  var dragImg = document.getElementById("dragImg");
  event.dataTransfer.setData("text/plain", dragImg.src);
  event.dataTransfer.setDragImage(dragImg, 0, 0);
}

其中，`event.dataTransfer` 是拖拽数据对象，`setData` 方法用于设置拖拽数据类型和值，`setDragImage` 方法用于设置拖拽时的图片和偏移量。

3. 最后，您需要为目标元素添加一个事件监听器，监听拖拽进入事件和拖拽放置事件。例如，您可以使用以下代码：

var dropZone = document.getElementById("dropZone");
dropZone.addEventListener("dragenter", dragEnter);
dropZone.addEventListener("dragover", dragOver);
dropZone.addEventListener("drop", drop);

function dragEnter(event) {
  event.preventDefault();
}

function dragOver(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  var src = event.dataTransfer.getData("text/plain");
  var img = document.createElement("img");
  img.src = src;
  dropZone.appendChild(img);
}

其中，`dropZone` 是目标元素的 DOM 元素，`dragenter` 和 `dragover` 事件用于阻止默认行为，`drop` 事件用于处理拖拽放置事件，并将拖拽数据显示在目标元素中。

希望这可以帮助您设置拖拽目标图片。