用拖放替换图像

Question

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. 我能够使用Visual Basic在Winform中实现我的目标。 Now I'm trying to do the same in html. 现在，我尝试在html中执行相同的操作。 Using the three functions below, I'm able to drag and drop an image from one div into another empty div. 使用下面的三个功能，我可以将图像从一个div拖放到另一个空div中。 But it doesn't work if I attempt to drop an image into a div that already contains an image. 但是，如果我尝试将图像拖放到已经包含图像的div中，将无法正常工作。 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. 我确实在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>

Answer 1

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. 我真正想做的是“交换”两个图像，然后将图像A放到图像B上，然后让图像B显示在图像A所在的位置。

I found a tutorial sample by Sue Smith at the following web site: 我在以下网站上找到了Sue Smith的教程样本：

http://www.webdesign.org/how-to-create-an-html5-drag-and-drop-component.22289.html http://www.webdesign.org/how-to-create-an-html5-drag-and-drop-component.22289.html

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. 在此示例中，她展示了如何设置6个div，每个div都具有一个内部div，每个内部div中都有一个文本字符串（通常是一个单词）。在她的示例中，很容易将一个单词与另一个单词“拖动”和“交换”。 But if you put an image in the div, it would no longer work. 但是，如果将图像放在div中，它将不再起作用。

So what I did was create an ID for each inner div. 所以我要做的是为每个内部div创建一个ID。 Then I assigned a background image for each inner div as well as removed the text. 然后，我为每个内部div分配了背景图片，并删除了文本。 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. 在尝试了Sue Smith的代码之后，我终于能够完成内部div的替换和交换（及其相关的背景图片。）最终结果是看起来好像您只是在拖动，拖放和交换图像。 This worked fine in both Chrome and Firefox. 在Chrome和Firefox中都可以正常工作。 For some reason it did not work in IE ver 11. You can see the modified code below. 由于某些原因，它在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>

用拖放替换图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-02-24 21:59:14

用拖放替换图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-02-24 21:59:14

解决方案1
0 已采纳 2015-02-24 21:59:14