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 */
         }
});

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

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

3 个答案: