javascript - jQuery Sortable 如果取消，只有一个列表仍会更新

Question

我有 2 个使用 jQuery sortable 连接的列表。当我将一个项目从一个列表移动到另一个列表时，会向 PHP 脚本发出 2 个 ajax 请求，该脚本使用列表的内容更新数据库 - 这工作正常。

但是我随后添加了一个 JavaScript 确认弹出窗口，并在按下“确定”时将 ajax 请求置于这种情况下。如果我在此弹出窗口上按“取消”，那么它仍然可以正常工作 - 但是，如果我“取消”，则移动项目的列表不会更新，因此两个列表都以该项目结束。

这是我的代码:

$(function() {

    $(".week1").sortable({
      connectWith: ".week2, .week1"
    }).disableSelection();

  });

    $(".week1, .week2").on("sortreceive", function (event, ui) {

        var answer = confirm("Move job?");
        if (!answer) {
            $(ui.sender).sortable('cancel');

            return false;
        }else{

            $('.week1, .week2').sortable({

                    update: function (event, ui) {

                        var data = $(this).sortable('serialize');

                        $.ajax({
                            data: data,
                            type: 'POST',
                            url: 'ajax_user_schedules.php'
                        })
                        .done(function( response ){
                            console.log( response );
                        });
                    }
                });

        }

    });

问题是有道理的，因为要更新的代码在 else 中，所以添加项目的列表不会运行此代码，我只是不知道如何修复它。我尝试将 week1 和 week2 sortables 分开，但这没有用，如果我从这种情况中取出更新代码，那么我会看到一个不同的问题 - 如果我取消，那么在放置项目之前更新删除项目的列表返回，因此两个列表最终都没有该项目。我正在做的事情出了点问题。

任何帮助都会很棒!

谢谢，

根据答案更新

$(function() {

  $(".week1, .week2").sortable({
      connectWith: ".week2, .week1",
      update: function (event, ui) {
                var data = $(this).sortable('serialize');

                console.log(this); // this is shown before confirm popup appears

                $.ajax({
                    data: data,
                    type: 'POST',
                    url: 'ajax_user_schedules.php'
                })
                .done(function( response ){
                    console.log( response );
                });
            }

    }).disableSelection();

    $(".week1, .week2").on("sortreceive", function (event, ui) {

        var answer = confirm("Move job?");
        if (!answer) {
            $(ui.sender).sortable('cancel');
            return false;
        }

    });
});

Answer 1

您的 else 子句重新初始化可排序对象。看起来您打算在第一个 .sortable({}) 初始化程序中使用 update 处理程序；您根本不需要 update，因为它会在每次 dom 更改时触发。只需将其拉入其自身的功能即可:

$(".week1").sortable({
      connectWith: ".week2, .week1"

}).disableSelection();

    var update = function (sortable) {

            var data = $(sortable).sortable('serialize');

            $.ajax({
                 data: data,
                 type: 'POST',
                 url: 'ajax_user_schedules.php'
            })
            .done(function( response ){
                 console.log( response );
            });
      }
$(".week1, .week2").on("sortreceive", function (event, ui) {

    var answer = confirm("Move job?");
    if (!answer) {
        $(ui.sender).sortable('cancel');

        return false;
    }
    else {
        update($(".week1"));
        update($(".week2"));
    }
});

(此外，.on(sortreceive) 处理程序绑定(bind)也应包装在就绪处理程序中)