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 需要使用 HTML 5，只有 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 回答