HTML拖拽功能失效求助：drag1图片无法拖入div1容器

我看你遇到了把id为drag1的图片拖到div1容器里没反应的问题，不过另一个包含4张图片的容器改完代码就正常了，咱们从你给出的代码片段和拖拽API的常见坑来一步步排查：

• 先补全/修正drop函数的代码
  你给出的drop函数最后是document.getElementById(dat...，明显是代码截断了，大概率是拼写错误或者没写完。完整的drop函数应该是这样：

  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    // 这里推荐用ev.currentTarget代替ev.target，避免目标容器有子元素时触发错误
    ev.currentTarget.appendChild(document.getElementById(data));
  }
  

  为什么用currentTarget？如果div1里面有其他子元素，拖拽时可能触发子元素的drop事件，ev.target就会指向子元素而不是容器本身，用currentTarget能确保你操作的是绑定了drop事件的div1容器。

• 检查HTML元素的拖拽属性是否齐全
  拖拽功能依赖几个关键属性，少一个都可能失效：

  • 被拖拽的图片（drag1）必须添加draggable="true"，同时绑定ondragstart事件：

    <img id="drag1" src="你的图片路径" draggable="true" ondragstart="drag(event)">
    

  • 目标容器（div1）必须绑定ondragover和ondrop事件：

    <div id="div1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
    

  很多时候失效就是因为漏加了draggable="true"，或者事件绑定的属性名写错了（比如把ondragstart写成ondrag）。

• 确认allowDrop函数的作用是否生效
  你的allowDrop函数里写了ev.preventDefault()，这部分是对的——浏览器默认不允许拖拽元素到其他容器上，必须阻止这个默认行为，才能触发后续的drop事件。要确认这个函数确实绑定到了div1的ondragover事件上，没有写错函数名。

• 对比正常工作的容器代码找差异
  既然另一个有4张图片的容器改完后正常，你可以把它的代码和div1、drag1的代码做逐行对比，重点看：

  • 事件绑定的属性是不是完全一致？
  • 拖拽元素的draggable属性有没有添加？
  • JS函数的逻辑有没有差异？比如是不是正常容器的drop函数用了currentTarget而div1的用了target？

给你一个完整的可运行示例，你可以参考调整自己的代码：

<!-- 目标容器 -->
<div id="div1" ondragover="allowDrop(event)" ondrop="drop(event)" style="width: 300px; height: 300px; border: 1px solid #ccc; padding: 10px;"></div>

<!-- 可拖拽图片 -->
<img id="drag1" src="https://picsum.photos/100/100" draggable="true" ondragstart="drag(event)" style="margin: 10px;">

<script>
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");
  ev.currentTarget.appendChild(document.getElementById(data));
}
</script>

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