乱码文字游戏使用jQuery ui-排序

Jumble Word Game using jQuery ui-sortable

本文关键字:jQuery ui- 排序 文字游戏      更新时间:2023-09-26

我正在尝试使用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();          
}

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

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

jsfiddle.net/JZ74V/32/

这个小提琴集可以帮助你理解我的需求,如果你需要的话可以使用它