Question

我正在尝试为孩子们制作一个简单的教育游戏，他们会拖放行星的照片，并且需要按照正确的顺序将它们放在正确的方框中。

我想弄清楚的是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>

任何帮助都会非常棒。附：需要使用HTML 5，CSS和JS只有没有库：）

Answer 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 {

    }
                  }

HTML 5拖放到正确的位置

1 个答案: