请完善以下代码，使移动图片时能更加有效，现在经常互相影响，想移动另外一张时，焦点还在前一张

首先，确保每张图片都有一个唯一的 ID，这样可以通过 ID 来区分不同的图片。然后，使用 JavaScript 来监听图片的移动事件，并在移动时将焦点设置到当前正在移动的图片上。

以下是示例代码：

HTML:

<img id="img1" src="image1.jpg" onmousedown="startDrag(event, 'img1')" />
<img id="img2" src="image2.jpg" onmousedown="startDrag(event, 'img2')" />

JavaScript:

var activeImg = null;
var offsetX = 0;
var offsetY = 0;

function startDrag(event, imgId) {
  event.preventDefault();
  activeImg = document.getElementById(imgId);
  offsetX = event.clientX - activeImg.offsetLeft;
  offsetY = event.clientY - activeImg.offsetTop;
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', stopDrag);
  activeImg.style.zIndex = 1;
}

function drag(event) {
  event.preventDefault();
  if (activeImg) {
    activeImg.style.left = (event.clientX - offsetX) + 'px';
    activeImg.style.top = (event.clientY - offsetY) + 'px';
    activeImg.style.zIndex = 1;
  }
}

function stopDrag(event) {
  event.preventDefault();
  activeImg = null;
  document.removeEventListener('mousemove', drag);
  document.removeEventListener('mouseup', stopDrag);
}

在这个示例中，我们使用了 `onmousedown` 事件来触发 `startDrag` 函数，并将当前图片的 ID 作为参数传递。在 `startDrag` 函数中，我们将当前图片设置为活动图片，并记录鼠标相对于图片左上角的偏移量。然后，我们注册 `mousemove` 和 `mouseup` 事件，用于跟踪鼠标移动和释放。在 `drag` 函数中，我们更新图片的位置，并设置其 `zIndex` 属性以确保它始终在顶部。最后，在 `stopDrag` 函数中，我们将活动图片设置为 `null`，并注销 `mousemove` 和 `mouseup` 事件。

这样，每当移动一张图片时，它就会成为活动图片，并且焦点会随着它的移动而移动。因此，你可以轻松地移动多张图片，而不必担心它们之间的干扰。