jQuery UI 可排序：如果更新回调使 AJAX 调用失败，则恢复更改？

Posted 2023-02-24

【中文标题】jQuery UI 可排序：如果更新回调使 AJAX 调用失败，则恢复更改？

【英文标题】：jQuery UI Sortable: Revert changes if update callback makes an AJAX call that fails?

【发布时间】：2011-02-11 14:37:51

【问题描述】：

我正在使用可排序小部件对项目列表进行重新排序。将一个项目拖到新位置后，我启动了一个 AJAX 表单发布到服务器以保存新订单。如果我收到来自服务器的错误消息，如何撤消排序（例如，将拖动项返回到列表中的原始位置）？

基本上，如果服务器确认更改已保存，我只希望重新订购“坚持”。

【问题讨论】：

请重新考虑哪个答案应该被接受。

【参考方案1】：

尝试以下方法：

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

【讨论】：

这对我有用，虽然我一次只发布一个更新。

ajax 通常是异步的，因此要使其实际工作，您必须在 ajax 请求的可排序 beforeStop 方法中等待/休眠，也许通过在 jquery 请求上将 async 设置为 false。

@Ryan 我使用$elem.sortable('cancel') 来撤消 UI 排序，如果后端未能持久化更改并且它正常工作。似乎cancel 撤消了对项目排列的最后修改，无论过去了多少时间（除非刷新页面或其他东西）。

谢谢！帮助了我

【参考方案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);
        
      ,
    );
  
);

您需要对其进行修改以适合您的代码库，但这是一个完全多线程安全的解决方案，对我来说效果很好。

【参考方案3】：

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

不过，与此同时，我认为最好的办法是编写某种 start 来存储排序，然后在失败时调用恢复函数。 IE。像这样：

$("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 */
         
);

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

【讨论】：

我只是在页面加载时克隆整个可排序的内容并将其填充到一个变量中以便安全保存。在 ajax 保存成功时，我将克隆变量替换为最新的可排序（再次克隆）。出错时，我用克隆替换可排序（并将其重新初始化为可排序）。到目前为止似乎工作正常......

您能否将此作为答案发布，以便对其进行投票？ :)