拖拽图片替换已有图片功能失效问题排查求助

问题根源 #

你的代码核心问题在于drop函数中ev.target的指向错误：当拖拽到已有图片的方块上时，ev.target会指向方块内的图片元素，而非方块容器本身。这导致：

1. target.querySelector("img")会在图片内部查找图片，自然找不到原有图片，无法执行移除操作；
2. 新图片会被错误添加到原有图片的内部，而非方块容器中。
   另外，给克隆的图片添加ondrop和ondragover属性属于冗余操作，这些事件逻辑应该绑定在方块容器上。

修正后的代码 #

JavaScript 部分

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var nodeCopy = document.getElementById(data).cloneNode(true);
  nodeCopy.id = "newId" + Date.now();
  nodeCopy.setAttribute("draggable", "true");
  nodeCopy.setAttribute("ondragstart", "drag(event)");

  // 确保获取到方块容器，而非内部的图片元素
  var target = ev.target.closest('.square') || ev.target;
  if (!target.classList.contains('square')) {
    target = target.parentElement;
  }

  // 移除容器内已有图片
  var existingImage = target.querySelector("img");
  if (existingImage) {
    target.removeChild(existingImage);
  }

  target.appendChild(nodeCopy);

  // 设置偏移量对齐方块内边距
  var offsetX = 6;
  var offsetY = 6;
  nodeCopy.style.position = "relative";
  nodeCopy.style.left = `-${offsetX}px`;
  nodeCopy.style.top = `-${offsetY}px`;
}

HTML 部分（补充完整示例）

<html>
<head>
<style>
.square {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 5px;
  float: left;
  margin: 5px; /* 增加margin方便区分方块 */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.draggable {
  cursor: move;
}
</style>
</head>
<body>
  <div class="clearfix">
    <div class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="square" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  </div>

  <div style="margin-top: 20px;">
    <img id="drag1" src="https://picsum.photos/50/50" draggable="true" ondragstart="drag(event)" width="50" height="50" class="draggable">
    <img id="drag2" src="https://picsum.photos/50/50?2" draggable="true" ondragstart="drag(event)" width="50" height="50" class="draggable">
  </div>
</body>
</html>

关键修改说明 #

1. 目标元素修正：使用ev.target.closest('.square')向上查找最近的方块容器，无论拖拽到方块内的任何元素（包括已有图片），都能准确获取到容器；
2. 移除冗余事件：删除克隆图片上的ondrop和ondragover属性，这些逻辑只需要绑定在方块容器上；
3. 简化偏移量设置：直接用负数值设置相对定位偏移，避免重复计算，确保图片与方块内边距对齐。

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