【发布时间】：2015-02-16 01:01:19
【问题描述】：
我从这个网站上的几个人那里得到了帮助，他们开发了一个拖放教育游戏，学生可以将图像拖到正确的顺序。我能够在带有 Visual Basic 的 Winform 中实现我的目标。现在我正在尝试在 html 中做同样的事情。使用下面的三个函数，我可以将图像从一个 div 拖放到另一个空 div 中。但是，如果我尝试将图像放入已经包含图像的 div 中，则它不起作用。我确实在 StackOverflow 中看到了关于在 drop 函数中使用这一行“ev.target.removeChild(ev.target.childNodes[0]”的响应。但这只会产生一个错误“Node.removeChild 的参数 1 不是对象。 "谢谢你的帮助。
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2, #div3, #div4, #div5
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #0066ff;}
#btn1
{float:left; width: 120px; height: 40px; margin: 125px; }
</style>
<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.target.removeChild(ev.target.childNodes[0]); //This line created an error
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src='Images/grass(3).jpg' draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="Images/sun.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31"> </div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
【问题讨论】：
-
请做两件事：一，提供MCVE，而不是简短的代码sn-p，除非MCVE真的很长。第二，每个问题只问一个问题 - 让一张图片替换另一张图片是（或似乎至少是）让他们交换的单独问题。
-
确保你进入的是 div 而不是图片。
-
穆萨，你是对的。 . .如果我增加 div 的大小，那么我可以在其中拖动第二个图像。如果我做了一些变通办法，这可能会有所帮助。我的偏好是在我将新图像放入之前删除（并复制）拖放区中的图像。
标签： javascript html drag-and-drop