Question

这是我今天的难题：

那个额外的复选标记是draggable进入小灰框。用户只能在盒子上放下4个复选标记。删除了四个复选标记后，我需要一种方法来禁用拖放。

How it's supposed to look http://bit.ly/1fqwYC9

另外，我需要一种方法来检查draggables是否在正确的droppables中。用户单击checkAns()按钮后会发生SUBMIT功能（此处未显示;它位于框下方），而var correct功能检查var answers中有多少正确答案。此外，我们已经创建了一些增加{{1}}的函数，因此可以检查删除了多少个复选标记。我这里有一些代码;但我不能为我的生活弄清楚它有什么问题。

在有人提到我之前，请允许我说明我已经看到了这个：

jQuery droppable and draggable count if correct

我实际上认为如果代码不需要使用相同的ID字符串来检查某些内容是否正确，那么它可能会起作用。我的复选标记编号为yes，但不幸的是，这不是匹配类型的情况...是否有一种方法可以让droppable检测是否已将一个可拖动的内容放入其中，无论ID如何？

请看一看;任何帮助将深表感谢！提前谢谢！

修改

这是fiddle。

EDIT2

由于我放置了一个链接到JS Fiddle，我删除了代码块以便于阅读。

Answer 1

所以我做了一些摆弄代码，我设法做了我需要做的事。

以下是更重要的代码。

这是droppables的代码（请参阅代码中的注释以获得解释）：

    $( "#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");
}

在这里发布答案，以便任何有相同问题的人都有某种参考！快乐的编码！

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

1 个答案: