JS实现div图片拖放 单图占满容器无法放入第二张图片问题

问题根因 #

出现这个问题是两个点共同导致的：

1. 事件目标判断逻辑有缺陷：event.target始终指向鼠标当前悬停的最内层元素，当dropzone里放入第一张图片后，后续拖拽时鼠标只要落在已放入的图片上，拿到的target就是img元素，不再匹配className === "dropzone"的判断条件，拖放逻辑直接不执行。
2. 缺少必要的样式约束：你没有给dropzone和内部图片设置尺寸限制，放入的图片会默认占满整个dropzone空间，导致容器没有可被鼠标命中的空白区域，进一步放大了前面的逻辑问题。
   另外你现有代码还漏了dragover事件的默认行为阻止，不写这部分的话浏览器默认会拦截拖放操作，drop事件根本不会触发。

修复步骤 #

1. 先添加CSS样式，给放置区设置固定尺寸，约束内部图片大小，避免单张图片占满容器：

#layout {
  display: flex;
  gap: 20px;
}
.dropzone {
  width: 280px;
  min-height: 200px;
  border: 2px dashed #aaa;
  padding: 10px;
  /* 内部图片自动换行 */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.dropzone img {
  width: 70px;
  height: 70px;
  object-fit: cover;
}

2. 修正JS拖放逻辑，用closest()方法向上查找最近的dropzone容器，兼容鼠标落在容器内子元素（比如已放入的图片）的场景，同时补全缺失的dragover事件处理：

let dragged = null;

// 绑定拖拽开始事件，记录当前拖拽的元素
document.querySelectorAll('#pallet img').forEach(img => {
  img.addEventListener('dragstart', (e) => {
    dragged = e.target;
  })
})

// 必须阻止dragover的默认行为，否则drop事件不会触发
document.addEventListener('dragover', (e) => {
  e.preventDefault();
})

// 修正drop事件逻辑
document.addEventListener('drop', (e) => {
  e.preventDefault();
  // 向上查找最近的放置区容器
  const dropZone = e.target.closest('.dropzone');
  if (dropZone && dragged) {
    dragged.parentNode.removeChild(dragged);
    dropZone.appendChild(dragged);
  }
})

修改完成后，单个dropzone里就可以放入多张图片，不会再出现第一张放入后就没法继续拖入的问题。

内容的提问来源于stack exchange，提问作者April