jQuery UI Sortable:如果更新回调使AJAX调用失败,则还原更改？

Question

我正在使用可排序的小部件来重新排序项目列表.将项目拖动到新位置后,我将AJAX表单发布到服务器以保存新订单.如果从服务器收到错误消息,如何撤消排序(例如,将拖动项返回到列表中的原始位置)？

基本上,如果服务器确认更改已保存,我只希望重新订购"坚持".

Answer 1

请尝试以下方法:

$(this).sortable('cancel');

Answer 2

我刚刚遇到了同样的问题,为了得到完整的答案,我想分享我对这个问题的解决方案:

$('.list').sortable({
  items:'.list:not(.loading)',
  start: function(event,ui) { 
    var element = $(ui.item[0]);
    element.data('lastParent', element.parent());
  },
  update: function(event,ui) {
    var element = $(ui.item[0]);
    if (element.hasClass('loading')) return;
    element.addClass('loading');
    $.ajax({
      url:'/ajax',
      context:element,
      complete:function(xhr,status) {
        $(this).removeClass('loading');
        if (xhr.status != 200) {
          $($(this).data('lastParent')).append(this);
        }
      },
    });
  }
});

您需要对其进行修改以适合您的代码库,但这是一个完全多线程安全的解决方案,对我来说非常有用.

Answer 3

我很确定 sortable 没有任何 undo-last-drop 功能——但这是一个好主意！

但与此同时，我认为最好的选择是编写某种start存储顺序的方法，然后在失败时调用恢复函数。即像这样：

$("list-container").sortable({
  start: function () { 
           /* stash current order of sorted elements in an array */
         },
  update: function () {
          /* ajax call; on failure, re-order based on the stashed order */
         }
});

不过，很想知道其他人是否有更好的答案。