用拖放替换图像

Question

我在开发一个 drag/drop 教育游戏时得到了该网站上几个人的帮助，学生可以在其中将图像拖到正确的顺序。我能够在带有 Visual Basic 的 Winform 中实现我的目标。现在我正尝试在 html 中做同样的事情。使用下面的三个函数，我可以将图像从一个 div 拖放到另一个空的 div 中。但是如果我试图将图像放入已经包含图像的 div 中，它就不起作用了。我确实在 Whosebug 中看到了关于在 drop 函数中使用这一行 "ev.target.removeChild(ev.target.childNodes[0]" 的响应。但这只会造成错误 "Argument 1 of Node.removeChild is not an object." 感谢您的帮助。

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

经过大量的反复试验和互联网搜索，我终于找到了我自己问题的答案。我的问题的本质是我无法将一张图片拖放到另一张图片上。通常，拖动的图像会消失。我真正想做的是 "swap" 两张图片，然后将图片 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 中都有一个文本字符串（通常是一个词。）在她的示例非常容易拖动 "swap" 一个词与另一个词。但是如果你把图片放在 div 中，它将不再起作用。

所以我所做的是为每个内部 div 创建一个 ID。然后我为每个内部 div 分配了一个背景图像并删除了文本。在尝试了 Sue Smith 的代码之后，我终于能够完成内部 divs 的替换和交换（以及它们相关的背景图片。）最终结果是看起来就像你只是在拖放和交换图片。这在 Chrome 和 Firefox 中都运行良好。由于某些原因，它在 IE ver 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>

用拖放替换图像

replace image with drag drop

html

javascript

drag-and-drop