用拖放替换图像 [英] replace image with drag drop
问题描述
我从该站点上的一些人那里得到了帮助，开发了一个拖放教育游戏，学生可以将图像拖动到适当的顺序.我能够使用Visual Basic在Winform中实现我的目标.现在，我尝试在html中执行相同的操作.使用下面的三个功能，我可以将图像从一个div拖放到另一个空div中.但是，如果我尝试将图像拖放到已经包含图像的div中，将无法正常工作.我确实在StackOverflow中看到了有关在drop函数中使用此行"ev.target.removeChild(ev.target.childNodes [0]"的响应.但这只会产生错误"Node.removeChild的参数1不是对象".感谢您的帮助.
I've gotten help from several on this site developing a drag/drop educational game where students drag images into the proper order. I was able to accomplish my goals in a Winform with Visual Basic. Now I'm trying to do the same in html. Using the three functions below, I'm able to drag and drop an image from one div into another empty div. But it doesn't work if I attempt to drop an image into a div that already contains an image. I did see a response in StackOverflow about using this line "ev.target.removeChild(ev.target.childNodes[0]" in the drop function. But this just creates an error "Argument 1 of Node.removeChild is not an object." Thanks for your help.
<!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所在的位置.
After a lot of trial and error plus internet searches, I finally came up with an answer to my own question. The essence of my question was that I could not drag and drop one image on to another. Typically the dragged image would disappear. What I really wanted to do was "swap" two images, and drop image A on to image B and then have image B show up where image A was.
我在以下网站上找到了Sue Smith的教程样本:
I found a tutorial sample by Sue Smith at the following web site:
http://www.webdesign.org/how-to-create-an-html5-drag-and-drop-component.22289.html
在此示例中，她展示了如何设置6个div，每个div都具有一个内部div，每个内部div中都有一个文本字符串(通常是一个单词).在她的示例中，拖动和交换"一个单词非常容易其他.但是，如果将图像放在div中，它将不再起作用.
In this sample she shows how to set up 6 divs, each with an inner div with a text string in each inner div (typically one word.) In her sample it was very easy to drag and "swap" one word with another. But if you put an image in the div, it would no longer work.
所以我要做的是为每个内部div创建一个ID.然后，我为每个内部div分配了背景图片，并删除了文本.在尝试了Sue Smith的代码之后，我终于能够完成内部div的替换和交换(及其相关的背景图片.)最终结果是看起来好像您只是在拖放，交换图像.在Chrome和Firefox中都可以正常工作.由于某些原因，它在IE版本11中不起作用.您可以在下面看到修改后的代码.
So what I did was create an ID for each inner div. Then I assigned a background image for each inner div as well as removed the text. After experimenting with Sue Smith's code, I was finally able to accomplish the replacing and swapping of inner divs (with their associated background picture.) The end result is that it looks as if you are just dragging, dropping and swapping images. This worked fine in both Chrome and Firefox. For some reason it did not work in IE ver 11. You can see the modified code below.
<!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>
这篇关于用拖放替换图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
