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 に答える