Javascript 用拖放替换图像
我在这个网站上得到了一些人的帮助，他们开发了一个拖放教育游戏，学生们可以将图像按正确的顺序拖动。我能够用VisualBasic在Winform中实现我的目标。现在我正试图在html中做同样的事情。使用下面的三个函数，我可以将图像从一个div拖放到另一个空div中。但是，如果我试图将图像拖放到已经包含图像的div中，则无法工作。我确实在StackOverflow中看到了关于在drop函数中使用此行“ev.target.removeChild（ev.target.childNodes[0]”的响应。但这只会创建一个错误“Node.removeChild的参数1不是对象。”谢谢您的帮助Javascript 用拖放替换图像,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,我在这个网站上得到了一些人的帮助，他们开发了一个拖放教育游戏，学生们可以将图像按正确的顺序拖动。我能够用VisualBasic在Winform中实现我的目标。现在我正试图在html中做同样的事情。使用下面的三个函数，我可以将图像从一个div拖放到另一个空div中。但是，如果我试图将图像拖放到已经包含图像的div中，则无法工作。我确实在StackOverflow中看到了关于在drop函数中使用此行“ev.target.removeChild（ev.target.childNodes[0]”的响应。
<!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>
#第一组，第二组，第三组，第四组，第五组
{浮点：左；宽度：100px；高度：35px；边距：10px；填充：10px；边框：1px实心35; 0066ff；}
#btn1
{浮点：左；宽度：120px；高度：40px；边距：125px；}
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
//ev.target.removeChild（ev.target.childNodes[0]）；//此行创建了一个错误
ev.target.appendChild（document.getElementById（数据））；
}
<!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>
搬运工先生{
宽度：200px；高度：170px；线条高度：4em；边距：10px；填充：5px；浮动：左侧；
边框：1px点#333333；文本对齐：居中；
}
#博萨{
背景图片：url（images/coyote.jpg）
}
#箱B{
背景图片：url（images/black_bear.jpg）
}
#boxC{
背景图片：url（images/grass.jpg）
}
#boxD{
背景图片：url（images/rabbits.jpg）
}
#拳击{
背景图片：url（images/sun.jpg）
}
功能dragWord（dragEvent）{
dragEvent.dataTransfer.setData（“Id”，dragEvent.target.Id+“|”+dragEvent.target.parentNode.Id）；
}
函数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]；
preventDefault（）；
}
拖放图片以显示能量如何通过食物链移动。