Question

我已经从这个网站上的几个人那里得到了帮助，开发了一个拖放教育游戏，学生将图像拖到正确的顺序。我能够使用Visual Basic在Winform中实现我的目标。现在我试图在html中做同样的事情。使用下面的三个功能，我可以将图像从一个div拖放到另一个空div中。但是，如果我尝试将图像放入已经包含图像的div中，它就无法工作。我确实在StackOverflow中看到了关于在drop函数中使用此行＆＃34; ev.target.removeChild（ev.target.childNodes [0]＆＃34;）的响应。但这只会产生错误＆＃34;参数1 Node.removeChild不是一个对象。＆＃34;感谢您的帮助。

    <!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

经过大量的试验和错误加上互联网搜索后，我终于找到了自己问题的答案。我的问题的实质是我无法将一张图像拖放到另一张图像上。通常拖动的图像会消失。我真正想做的是＆＃34;交换＆＃34;将图像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中都有一个文本字符串（通常是一个单词。）在她的示例中，它非常容易拖动和＆＃34;交换＆＃ 34;一个字与另一个。但是如果你在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>

用拖放替换图像

1 个答案: