基于拖放项目的jQuery验证答案

【问题标题】：jquery validation based on drag & dropped items基于拖放项目的jQuery验证
【发布时间】：2012-11-28 22:29:57
【问题描述】：

我正在尝试尽可能多地了解 jquery，查看网络上的许多示例，但仍然遇到事件问题。

如您所见，我使用 jquery UI 做了一个简单的拖放操作，但我发现 arround 的所有示例都无法帮助我验证这一点。

我创建了正确答案，但问题是我不知道如何验证它们。很容易看出，'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

【问题讨论】：

标签： javascript jquery-ui drag-and-drop

【解决方案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/。但是这段代码只有基本的功能，你需要改进它。

【讨论】：