等待ajax更新时禁用jquery可排序的方法？

Question

我有一个可排序的 jquery，它带有与更新事件相关的 ajax 回调。 ajax 回调将更新的排序顺序发送回服务器，然后刷新可排序以确保客户端和服务器都同步。

我遇到的问题是用户可以在 ajax 调用完成之前启动一个新的可排序事件 - 我想阻止这种情况。

我所做的尝试是在更新事件上禁用可排序，然后在 ajax 调用返回时重新启用它。但是，除非我弄乱了顺序，否则这似乎不起作用 - 我仍然可以在 ajax 调用仍处于活动状态时开始新的可排序拖动。

还有其他方法可以防止这种情况吗？我当然可以设置一个全局 javascript 变量，上面写着“嘿，现在不行，我正在 ajaxing ......”并引用它，但我不确定哪个可排序事件会检查这个，或者它会如何杀死可排序的点击请求。

想法？

Answer 1

为了更好的用户体验...

您应该取消之前的 ajax 请求，而不是禁用接口，这样它就不会覆盖任何新请求。

这使界面保持响应、流畅和灵活。 它允许用户“改变主意”并在等待保存时重新排列列表。 任何旧请求都会被取消，因此不会覆盖新请求...

    //keep track of ajax request to allow cancellation of requests:
    var ajaxRequest = null;

    $('ul.sortable').sortable({
        containment: 'parent',
        update: function (event, ui) {

            //display your loading anim gif

            //get list of ids in correct order:
            var ids = $(this).sortable('toArray').toString();

            //cancel any previous ajax requests:
            if (ajaxRequest) {
                ajaxRequest.abort();
            }

            //post order to web service:
            ajaxRequest = $.ajax({
                type: 'POST',
                url: 'somewebservice.blah',
                data: ids,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    //saved ok:
                    ajaxRequest = null;

                    //hide your loading anim gif
                }
            });
        }
    });

Answer 2

您可以简单地在整个列表上覆盖一个绝对定位的透明 div，这将防止列表上的任何点击/拖动。

在您的 CSS 中将其设置为 display: none。然后，当您发起 AJAX 调用时，将其设置为 display: block，当您的 AJAX 调用完成时，将其切换回 display: none。

Answer 3

您是否尝试设置 disabled 属性？

$('#sortable').sortable('option', 'disabled', true )

然后在ajax请求之后

$('#sortable').sortable('option', 'disabled', false )