可以删除可拖动的限制次数，如果正确则计算？

Question

这是我今天的难题：

下面那个额外的复选标记是进入小灰色框的draggable。用户应该只能在框上放置 4 个复选标记。去掉四个复选标记后，我需要一种禁用拖放的方法。

另外，我需要一种方法来检查draggables 是否在正确的droppables 中。 checkAns() 函数在用户单击SUBMIT 按钮（此处未显示；它位于框下方）时发生，它用于检查var correct 中有多少正确答案。此外，我们还制作了一些增加var answers 的函数，因此可以检查已删除了多少复选标记。我这里有一些代码；但我终其一生都无法弄清楚它有什么问题。

在任何人推荐我之前，让我先声明一下我已经看到了：

jQuery droppable and draggable count if correct

而且我实际上认为，如果不是因为代码需要具有相同的 ID 字符串来检查某些内容是否正确，它可能会起作用。我的复选标记编号是，但不幸的是，这不是匹配类型的情况......有没有办法让 droppable 检测是否已将可拖动对象放入其中，而不管 ID 是什么？

请看一下；任何帮助将不胜感激！提前谢谢！

编辑

这是fiddle。

EDIT2

由于我放了一个指向 JS Fiddle 的链接，为了便于阅读，我删除了代码块。

Answer 1

所以我对代码做了一些修改，并设法完成了我需要做的事情。

这里是更重要的代码。

这是 droppables 的代码（解释见代码中的 cmets）：

    $( "#dropArea1" ).droppable({

                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    cursor: "arrow",
                    drop: function( event, ui) {
                    //correct++ goes here if item is correct or if wrong="false"
                    answers++;
                    //just to check if code is working properly
                    console.log(ui.draggable.attr('id')) ;
                    console.log(answers);
                    console.log(correct);
                    //says if item is correct or not; makes img border red or green in checkAns()
                    wrong1="true";

                    if(ui.draggable.attr('id') == "cMark1"){
                        //if 4 check marks have been dropped, you can't drop any more
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark1" ).draggable({ disabled: true });
                        }
                        //if less than 4 have been dropped, just disable the draggable
                        else {
                            $( "#cMark1" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark2"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark2" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark2" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark3"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark3" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark3" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark4"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark4" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark4" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark5"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark5" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark5" ).draggable({ disabled: true });
                        }
                    }
                    if(ui.draggable.attr('id') == "cMark6"){
                        if (answers == 4) {
                            $('.box').droppable( 'disable' );
                            $( "#cMark6" ).draggable({ disabled: true });
                        }
                        else {
                            $( "#cMark6" ).draggable({ disabled: true });
                        }
                    }

                //alert(answer1);
                        $( ".drag" ).css( 'cursor', 'default' );
                            $( ".draggable" ).draggable({ disabled: false });
                            $( "#dropArea1" ).append(ui.draggable.css('position','static'))
                            $( ".drag" ).append(ui.draggable.css('margin','5px'))
                            $(this).droppable( 'disable' );
                    },
                });

这是checkAns()函数：

function checkAns(){

    document.getElementById('alertMsg').style.visibility = "hidden";
    $( ".drag" ).draggable({ disabled: true });

    //if an item is wrong, image border turns red
    if(wrong1 == "true"){
        $('#img1').css('border', '1px solid red');
    }
    if(wrong2 == "true"){
        $('#img2').css('border', '1px solid red');
    }
    if(wrong3 == "true"){
        $('#img3').css('border', '1px solid red');
    }
    if(wrong4 == "true"){
        $('#img4').css('border', '1px solid red');
    }
    if(wrong5 == "true"){
        $('#img5').css('border', '1px solid red');
    }
    if(wrong6 == "true"){
        $('#img6').css('border', '1px solid red');
    }   

    //if an item is correct, image border turns lime
    if(wrong1 == "false"){
        $('#img1').css('border', '1px solid lime');
    }
    if(wrong2 == "false"){
        $('#img2').css('border', '1px solid lime');
    }
    if(wrong3 == "false"){
        $('#img3').css('border', '1px solid lime');
    }
    if(wrong4 == "false"){
        $('#img4').css('border', '1px solid lime');
    }
    if(wrong5 == "false"){
        $('#img5').css('border', '1px solid lime');
    }
    if(wrong6 == "false"){
        $('#img6').css('border', '1px solid lime');
    }


    document.getElementById("score").innerHTML = correct + '<span>/4</span>';
    document.getElementById("submitAns").setAttribute("disabled", "disabled");
    document.getElementById("refreshBtn").setAttribute("disabled", "disabled");
}

在此处发布答案，以便遇到相同问题的任何人都有某种参考！编码愉快！