如何通过HTML5拖拽功能避免DOM元素嵌套，实现元素换行排列

问题场景 #

开发简易HTML5拖拽功能，设置3个容器：A、B为带图片的源容器，C为目标容器。拖拽图片到另一图片上方时，会产生嵌套DOM结构，图片重叠，仅能通过查看DOM发现两张图片共存。需求是拖拽到图片上方时，元素仍能在容器内新行排列，避免嵌套。

现有代码 #

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

CSS #

#div1,
#div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

#div3 {
  float: left;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

HTML #

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31">
</div>

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

解决方案 #

问题核心是drop函数中ev.target指向的是被拖拽到的元素——如果拖拽到图片上，ev.target就是<img>标签，导致新图片被嵌套到已有图片内部。

1. 修改拖拽逻辑，确保元素添加到容器 #

修改drop函数，始终将拖拽元素添加到容器<div>中，而非图片元素：

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  // 找到真正的容器：如果目标是图片，取其父元素；否则直接用目标
  const container = ev.target.tagName === 'IMG' ? ev.target.parentElement : ev.target;
  container.appendChild(document.getElementById(data));
}

更通用的写法可以用closest方法匹配容器（比如所有带ondrop属性的div）：

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  // 找到最近的容器div
  const container = ev.target.closest('[ondrop]');
  if (container) {
    container.appendChild(document.getElementById(data));
  }
}

2. 调整CSS让容器支持多行排列 #

去掉容器的固定高度，设置支持垂直方向的布局，让图片自动换行：

#div1,
#div2,
#div3 {
  float: left;
  width: 100px;
  min-height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  /* 垂直方向布局，自动换行 */
  display: flex;
  flex-direction: column;
  gap: 5px; /* 可选，增加图片间距 */
}

修改后，无论拖拽到容器空白区域还是已有图片上，都会将图片添加到容器的子元素列表中，自动在新行排列，彻底避免嵌套问题。

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