javascript - 使用 jQuery ui-sortable 的 Jumble Word 游戏

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

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

最佳答案

感谢您的回复 Tilwin Joy,我实际上自己修复了它。更新的代码集位于

jsfiddle.net/JZ74V/32/

这套 fiddle 可以帮助您了解我的需求,如果需要的话可以使用它。

关于javascript - 使用 jQuery ui-sortable 的 Jumble Word 游戏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24118786/

相关文章:

javascript - 如何在 Javascript 中验证日期期间是否与其他日期期间交叉?

php - 根据下拉列表使用数据库值动态更新 div

javascript - Bootstrap 导航栏会展开但不会折叠

jquery - 从 jQuery DataTables 拖动到 jQuery NestedSortable

javascript - 如何处理大的 JQueryUI 自动完成响应?

javascript - jQuery UI 可排序 'out' 未与多个连接的可排序一起触发

javascript - 获取js对象中value对应的key

javascript - 在 hubspot 中提交表单时,表单提交被阻止

jquery - 在剑道网格中搜索并突出显示搜索字符串

javascript - 检查数组长度javascript