0

您好，我正在尝试使用 HTML5 拖放制作一个 javascript Web 应用程序。这是一个儿童游戏，他们需要将一个数字（从 1 到 6，它们都是容器内 div 中的图像）拖到背景具有设定数量项目的 div 中。因此，如果 div 有 6 个糖果的背景图像，他们需要将数字 6 拖到上面。

我做得很好，我的代码可以进行拖放，但我希望这种情况发生：

-当一个孩子将一个数字拖到一个div上然后意识到他错了，他可以直接拖动正确的数字，前一个就会消失。但是使用我当前的代码，如果您尝试新的拖动数字消失并且 div 保留旧数字。

这是我的代码：

// JavaScript Document
window.Mover = window.Mover || {};
window.Mover = ( function ( ) {
    "use strict" ;  

    function Mover ( ) {
    }

    Mover.prototype.allowDrop= function (e)
    {
        e.preventDefault();
    };

    Mover.prototype.drag = function (e) 
    {

        e.dataTransfer.setData("Text",e.target.id);

    };



    Mover.prototype.drop = function (e) 
    {

            e.preventDefault();
            var data=e.dataTransfer.getData("Text");        
            e.target.appendChild(document.getElementById(data));


    };  

    return Mover ;
                             }( ) ) ;



    var moviendo = new Mover( ) ;

任何帮助将不胜感激，ty！

4

1 回答 1

0

appendChild()不删除旧元素；新的可能在那里，但你看不到它。在附加新元素之前尝试这样的事情：

e.target.removeChild(e.target.childNodes[0])
于 2013-06-20T16:47:29.610 回答