基於拖放項目的jQuery驗證

Question

我正在嘗試盡可能多地了解jquery，在網絡上查看了許多示例，但事件仍然存在問題。

如您所見，我使用jquery UI進行了簡單的拖放操作，但是我發現arround的所有示例都無法幫助我進行驗證。

我創建了correctAnswers，但問題是我不知道如何驗證它們。 顯而易見，'a'變為1，'b'變為2，'c'變為3，當我單擊“ submit”按鈕時，它將生效。

var correctAnswers = ['a-1,b-2,c-3'];

$('.dragAble').draggable({
    containment: "#content",
    cursor: "move",
    snap: ".dropAble"
});
if (answers === correctAnswers) {
    $("#win").show();
} else {
    $("#fail").show();
};​

JSFiddle

Answer 1

試試這個代碼：

var correctAnswers = ['a-1', 'b-2', 'c-3'];
var results = [];

$('.dragAble').draggable({
    containment: "#content",
    cursor: "move",
    snap: ".dropAble",
});

$( ".dropAble" ).droppable({
    drop: function( event, ui ) {
        results.push($(ui.draggable).attr("id") + '-' + $(this).attr("id"));
    }
});

$("#submit").click(function(){
    console.log(results);
    result = true;
    $.each(results, function(index, value){
        if($.inArray(value, correctAnswers ) == -1){
            result = false;
        }

        if(!result) return;
    });

    if (result) {
        $("#win").show();
    } else {
        $("#fail").show();
    };
});​

這里的小提琴http://jsfiddle.net/aanred/x3jF3/ 。 但是此代碼僅具有您需要改進的基本功能。