如果 AJAX 请求失败，如何将列表顺序恢复到上次更改之前的状态？

Question

我使用Sortable JS 库和jQuery 在列表顺序更改时执行AJAX 请求。我是这样做的：

<ul id="items">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<script type="text/javascript">
  $(document).ready(function() {
    var el = document.getElementById('items');

    Sortable.create(el, {
      onEnd: function (event) {
        var new_position = event.newIndex+1;

        $.ajax({
          type: 'PATCH',
          url: 'path/to',
          data: {'new_position': new_position},
          dataType: 'script'
        }).fail(function(jqXHR, textStatus, errorThrown) {
            // Revert the list order to how it was before the current sort started.
          });
      }
    });
  });
</script>

如果 AJAX 请求失败，我想将列表顺序恢复到上次更改之前的状态。

我怎样才能做到这一点？

Answer 1

您可以使用 vanilla JS cloneNode 或 jQuery clone 方法克隆列表节点并对克隆的节点进行排序。然后，成功后，您可以将原始节点与克隆节点交换。或者您可以采用另一种方式 - 获取节点，克隆它，对原始节点进行排序，然后在失败时将其与克隆的节点交换，但是我会采用第一种方法（成功时交换），因为您限制了最终的数量DOM 变化。 参考资料：

• https://api.jquery.com/clone/
• https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode