我从该站点上的一些站点获得帮助，开发了拖放教育游戏，学生可以将图像拖动到适当的顺序。我能够使用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>
最佳答案
经过大量的反复试验和互联网搜索，我终于找到了自己的问题的答案。我的问题的实质是我无法将一个图像拖放到另一个图像上。通常，拖动的图像会消失。我真正想做的是“交换”两个图像，然后将图像A放到图像B上，然后让图像B显示在图像A所在的位置。
我在以下网站上找到了Sue Smith的教程样本：
http://www.webdesign.org/how-to-create-an-html5-drag-and-drop-component.22289.html
在此示例中，她展示了如何设置6个div，每个div都有一个内部div，每个内部div中都有一个文本字符串（通常是一个单词）。在她的示例中，很容易将一个单词拖放到另一个单词中。但是，如果将图像放在div中，它将不再起作用。
所以我要做的是为每个内部div创建一个ID。然后，我为每个内部div分配了背景图片，并删除了文本。在尝试了Sue Smith的代码之后，我终于能够完成内部div的替换和交换（及其相关的背景图片。）最终结果是看起来好像您只是在拖放，交换图像。在Chrome和Firefox中都可以正常工作。由于某些原因，它在IE版本11中不起作用。您可以在下面看到修改后的代码。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.mover {
width:200px; height:170px; line-height:4em; margin:10px; padding:5px; float:left;
border:1px dotted #333333; text-align:center;
}
#boxA{
background-image: url(images/coyote.jpg)
}
#boxB{
background-image: url(images/black_bear.jpg)
}
#boxC{
background-image: url(images/grass.jpg)
}
#boxD{
background-image: url(images/rabbits.jpg)
}
#boxE{
background-image: url(images/sun.jpg)
}
</style>
<script type="text/javascript">
function dragWord(dragEvent){
dragEvent.dataTransfer.setData("Id", dragEvent.target.id+"|"+dragEvent.target.parentNode.id);
}
function dropWord(dropEvent){
var dropData = dropEvent.dataTransfer.getData("Id");
dropItems = dropData.split("|");
var prevElem = document.getElementById(dropItems[1]);
prevElem.getElementsByTagName("div")[0].id = dropEvent.target.id;
dropEvent.target.id = dropItems[0];
dropEvent.preventDefault();
}
</script>
</head>
<body> <div><em>Drag and drop the pictures in order to show how energy moves through a food chain.</em></div>
<div id="box1" ondragover="event.preventDefault()" ondrop="dropWord(event)" >
<div class="mover" id="boxA" draggable="true" ondragstart="dragWord(event)" ></div>
</div>
<div id="box2" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div class="mover" id="boxB" draggable="true" ondragstart="dragWord(event)"></div>
</div>
<div id="box3" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div class="mover" id="boxC" draggable="true" ondragstart="dragWord(event)"></div>
</div>
<div id="box4" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div class="mover" id="boxD" draggable="true" ondragstart="dragWord(event)"></div>
</div>
<div id="box5" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div class="mover" id="boxE" draggable="true" ondragstart="dragWord(event)"></div>
</div>
</body>
</html>