我在这个网站上得到了一些人的帮助，开发了一个拖/放教育游戏，学生可以将图像拖到正确的顺序。我能够使用 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>
关于javascript - 用拖放替换图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28533133/