基于drag& amp;的jquery验证丢弃的物品 [英] jquery validation based on drag & dropped items

问题描述

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

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

正如你所看到的，我使用jquery UI做了一个简单的拖放操作，但我找到的所有例子都没有帮助我验证这一点。

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.

我创建了correctAnswers，但问题是我不知道如何验证它们。由于很容易看到，'a'变为1，'b'变为2，'c'变为3，当我点击'submit'按钮时，它会验证。

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

推荐答案

试用此代码：

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

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

这篇关于基于drag& amp;的jquery验证丢弃的物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！