jQuery UI 可排序 - ajax 错误后恢复原始位置

Question

当用户更改列表元素的顺序时，我使用 ajax 使用新顺序更新数据库。

但是，如果数据库由于某种原因无法保存，我会报错。如何恢复 li 元素的原始位置？

$('.sortable').sortable({
  opacity: '0.5',
  start: function(event,ui) { 
    var element = $(ui.item[0]);
    element.data('lastParent', element.parent());
  },
  update: function(e, ui) {
    var neworderSer = $(this).sortable("serialize");
    var neworderArray = $(this).sortable('toArray');

    $.ajax({
        url: "/btstadmin/pages/reorder.json",
        type: "post",
        dataType:"json",
        data: neworderSer,
        success: function(feedback) {
          notify('Reordered pages');
        },
        error: function(e) {
          $($(this).data('lastParent')).append(this);
          notify('Reordered pages failed', {
              status: 'error'
          });
        }
    });      
    for (var i=0; i < neworderArray.length; i++) {
      if (i==0) {
        $("#"+neworderArray[i]+" .pageNum").fadeOut().text( "Cover" ).fadeIn();
      }else {
        $("#"+neworderArray[i]+" .pageNum").fadeOut().text( "Page "+i ).fadeIn();
      }
    }
  }
});

我真正需要的是存储整个 Ul

<ul id="pageMenu" class="nav nav-pills nav-stacked sortable ui-sortable">
    <li class="" id="item_4">
        <a href="/btstadmin/pages/view/4">keiths page1</a>
    </li>
    <li class="" id="item_5">
        <a href="/btstadmin/pages/view/5">keiths page2</a>
    </li>
    <li class="" id="item_6">
        <a href="/btstadmin/pages/view/6">keiths page3</a>
    </li>
</ul>

更新： 当我使用 start 时：我得到了 sortable 临时添加的额外代码。我需要 beforeStart 之类的东西，或者只捕获没有添加内联样式的原始项目。

  start: function(event, ui) { 
    prevPositions = $(".sortable").html();
  },

这给了我：

<ul id="pageMenu" class="nav nav-pills nav-stacked sortable ui-sortable">
    <li class="" id="item_3">
        <a href="/btstadmin/pages/view/3">Cover</a>
    </li>
     <li class="" id="item_4" style="width: 261px; height: 54px; position: absolute; opacity: 0.5; z-index: 1000;">
        <a href="/btstadmin/pages/view/4">keiths page1</a>
    </li>
         <li class="ui-sortable-placeholder" style="visibility: hidden; height: 54px;"></li>
     <li class="" id="item_7">
        <a href="/btstadmin/pages/view/7">test page 2</a>
     </li>
</ul>

Answer 1

jQuery UI 本身不提供这样的功能。所以你可以用任何一种方式做到这一点：

• 根据 id 属性对元素进行排序并重新附加到可排序对象 容器。忙碌的工作。
• 创建可排序元素的副本并在需要时重置。更简单。

我更喜欢第二种选择。创建副本

var unOrderedList = $("#sortable").html();

使用refresh 或refreshPositions，然后将列表重置为。 Documentation

error: function(e) {
      $("#sortable").html(unOrderedList);
      $("#sortable").sortable("refreshPositions");
                 }

这是Working Fiddle