1

私は子供向けの簡単な教育ゲームを作ろうとしています。そこでは、惑星の写真をドラッグアンドドロップして、正しいボックスに正しい順序で配置する必要があります。

私が理解しようとしているのは、ボックスにドロップされている要素がそのボックスに一致する要素であることを確認するために必要なJSです。私がこれまでに持っているコードでは、ドラッグアンドドロップが可能ですが、チェックはありません。これが私が持っているものです：

<script type="text/javascript">

    function allowDrop(ev){
        ev.preventDefault();
    }

    function drag(ev){
        ev.dataTransfer.setData("content", ev.target.id);
    }

    function drop(ev){
        ev.preventDefault();
        var image= ev.dataTransfer.getData("content");
        ev.target.appendChild(document.getElementById(image));
    }
</script>

<section id="planetbox">
    <img id="mercuryImg" draggable="true" ondragstart="drag(event)" src="./images/planets/mercury.gif">
</section>

<section id="mercurybox"ondrop="drop(event)" ondragover="allowDrop(event)"> </section>

どんな助けでも本当に素晴らしいでしょう。PSはHTML5、CSS、JSのみを使用する必要がありますライブラリはありません:)

4

1 に答える 1

1

関数 drop(ev) で以下のコードを使用して問題を解決できました。

function drop(ev){
    ev.preventDefault();
    var image= ev.dataTransfer.getData("content");
    if ( image == ev.target.id) {
           ev.target.appendChild(document.getElementById(image));
    }
    else {

    }
                  }
于 2012-12-24T21:10:57.083 に答える