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

Question

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

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

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

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

想法？

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

您是否尝试设置禁用属性？

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

然后在ajax请求之后

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