jquery validation based on drag & dropped items

余生长醉 提交于 2019-12-23 03:56:04

问题


I'm trying to learn about jquery as much as possible, looking at many examples around the web, but still got problem with events.

As you can see, I made a simple drag&drop thing using jquery UI, but all examples I found arround didn't help me with validating this.

I created correctAnswers but the problem is I have no idea how to validate them. As it's easy to see, 'a' goes to 1, 'b' goes to 2, and 'c' goes to 3, and when I click 'submit' button it validates.

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


回答1:


Try this code:

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();
    };
});​

Here the fiddle http://jsfiddle.net/aanred/x3jF3/. But this code has only basic function you need to improve it.



来源:https://stackoverflow.com/questions/13615567/jquery-validation-based-on-drag-dropped-items

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!