jQuery可以与Modal一起排序以确认移动

Question

使用jQuery的可排序功能和模式弹出窗口我有一点困境。我所拥有的是一个可排序列表和一个从1开始的排序顺序。如果1以下的项目移动到位置1以上，我需要提示使用模态用户他们正在移动一个高于默认值的项目，这将成为默认值。此时的用户可以单击“确定”或取消。如果选择取消，则我需要将选择恢复为原始位置。我遇到的问题是，当我在stop中调用then函数来显示模态时，可排序代码仍然在后台执行代码。当我收到模态的答案时，我无法再访问以前的值来恢复可排序的项目。

我能用alert（）实现我的上述目标，但我需要一个模态，任何帮助都表示赞赏！

$(".moduleSettingsGridView tbody").sortable({
             items: 'tr:not(tr:first-child)',
             containment: "parent",
             start: function(event, ui) {
                 ui.item.data('start_pos', ui.item.index());
             },
             stop: function(event, ui) {
                 var start_pos = ui.item.data('start_pos');
                 var index = ui.item.index();
                 var maxSortPos = [];
                 $('.moduleSettingsGridView tbody tr:not(tr:first-child)').each(function() {
                     if ($(this).find('.chbActive input').prop("checked")) {
                         maxSortPos.push($(this).closest('tr').index());
                     }
                 });
                 max = Math.min.apply(Math, maxSortPos);
                 var newpos = ui.item.index();
                 var item = $(this).find('.chbActive input').prop("checked");
                 if ((index <= max) && (item)) {
                     dialog_confirm();
                     function dialog_confirm() {
                         var defer = $.Deferred();
                         $('#modal_confirm_yes_no').dialog({
                             autoOpen: true,
                             height: 140,
                             modal: true,
                             buttons: {
                             "Submit": function() {
                                     defer.resolve("yes");
                                     $(this).dialog("close");
                                     dialog_confirm_callback(true);
                                 },
                                 Cancel: function() {
                                     defer.reject("no");
                                     $(this).dialog("close");
                                     dialog_confirm_callback(false);
                                 }
                             }
                         });
                         return defer.promise();

                     }
                     function dialog_confirm_callback(value) {
                         if (value) {
                             $(this).append(ui.sortable);
                         } else {
                            $(this).sortable('cancel');
                            $(ui.sender).sortable('cancel');
                         }
                     }
update: function(event, ui) { UpdateSortOrder(); },
             helper: function(e, tr) {
                 var $originals = tr.children();
                 var $helper = tr.clone();
                 $helper.children().each(function(index) {
                     // Set helper cell sizes to match the original sizes
                     $(this).width($originals.eq(index).width())
                 });
                 return $helper;
             }
         }).disableSelection();
         $(".moduleSettingsGridView tbody tr:not(tr:first-child)").hover(function() { $(this).css("cursor", "Pointer"); });

Answer 1

问题是$(this)内的Dialog Box选择器与sortable的选择器冲突。因此，在对话框内操作时，将sortable选择器更改为$(".sortable")而不是$(this)，

$("#sortable").sortable({
    cancel: ".fixed",
    stop: function () {
        $('#modal_confirm_yes_no').dialog({
            autoOpen: true,
            height: 140,
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                    dialog_confirm_callback(true);

                },
                    "Cancel": function () {
                    $("#sortable").sortable('cancel');
                    dialog_confirm_callback(true);
                    $(this).dialog("close");
                }
            }
        });
    }
});


function dialog_confirm_callback(value) {
    if (value) {} else {
        $("#sortable").sortable('cancel');
    }
}
$("#sortable").disableSelection();

请参阅working fiddle