HTML拖拽功能疑问：无法将元素拖回初始位置

嘿，我来帮你搞定把元素拖回初始位置的问题！你的现有代码已经实现了单向拖拽，但要让元素能来回拖，核心是给图片的初始位置也设置一个可放置的容器，同时确保拖拽逻辑支持双向移动。

问题分析 #

你当前的代码里，只有div1是可放置区域，图片的初始位置没有被标记为可放置容器，所以拖到div1之后，没法再拖回去。咱们只需要给初始位置也加一个可放置容器，再稍微调整下逻辑（其实逻辑本身已经支持移动元素，因为appendChild会自动把元素从原父节点移到新节点）。

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
<style>
#div1, #div2 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
  margin-bottom: 10px;
}
</style>
</head>
<body>

<p>拖拽图片在两个矩形之间来回移动：</p>
<!-- 初始位置的可放置容器 -->
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<!-- 目标位置的可放置容器 -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<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");
  // 这里的appendChild会自动把元素从原父节点移除，添加到新容器里
  ev.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>

关键说明 #

• 新增了div2作为图片的初始可放置容器，和div1一样绑定了ondrop和ondragover事件
• drop函数里的appendChild方法本身就具备移动元素的能力：当你把元素添加到新容器时，它会自动从原来的父容器中移除，所以不需要额外写移除逻辑
• 两个容器的样式保持一致，方便用户识别可放置区域

这样修改后，你就能把图片在div1和div2之间来回拖拽啦！

内容的提问来源于stack exchange，提问作者TSCAmerica.com