Jumble Word游戏使用jQuery ui-sortable

时间:2014-06-09 10:54:48

标签: javascript jquery jquery-ui jquery-ui-sortable

我正在尝试使用jQuery ui-sortable进行混乱的文字游戏,用户可以尝试交换元素并提交答案。在这里,用户将获得两次机会。如果用户在第一次提交答案时失败,他将通过冻结正确的字符给予另一次机会,这意味着不允许移动正确的字符。我只想在其他错误字符之间移动或交换错误的字符。我尝试了下面的代码

$("#word_"+i).sortable({
                axis: 'x',
                items: 'label:not(.correctText)',
                cancel: '.correctText',
                scrollSensitivity: 1,
                tolerance: "pointer" ,
                start: function(){
                    $(this).find("label:not(.ls)").each(function () {
                        $(this).data("fixedIndex", $(this).index());
                    });
                },
                change: function(){
                 $(this).find("label:not(.ls)").each(function () {                       
                    attrID = $(this).closest(".ui-sortable").attr("id");                        
                    if($(this).data("fixedIndex")!=0)
                    {
                      $(this).detach().insertAfter($("#"+attrID+" label:eq(" + ($(this).data("fixedIndex")-1) + ")"));                          
                    }
                    else
                    {
                      $(this).detach().insertBefore($("#"+attrID+" label:eq(" + ($(this).data("fixedIndex")) + ")"));
                    }
                  }); 
                }
            });
           $("#word_"+i+" label.correctText").disableSelection();          
}

如果我将第二个和第三个字母移动到正确位置并提交,我可以使用上述逻辑冻结正确的元素,但不能连续正确的字符。它被冻结但当我试图将第一个错误的元素移动到某个地方时,我就陷入了麻烦。它将正确的字符移动到错误的位置。

1 个答案:

答案 0 :(得分:1)

感谢您对Tilwin Joy的回复,我实际上是自己解决了这个问题。更新的代码集在

jsfiddle.net/JZ74V/32 /

这个小提琴套装可以帮助您理解我的要求,如果需要,您可以使用它。