Question

我有一个jquery可排序的ajax回调绑定到update事件。 ajax回调将更新的排序顺序发送回服务器，然后刷新sortable以保证客户端和服务器都同步。

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

我尝试做的是禁用update事件的sortable，然后在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

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

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

然后在ajax请求之后

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

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

3 个答案: