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();
      }
    }
  }
});

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

<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>

UPDATE：当我使用start时：我获得了可排序的额外代码。我需要像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属性对元素进行排序，然后重新附加到sort-able 容器。 HECTIC的工作。
创建可排序元素的副本，并在需要时重置。更容易。

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

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

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

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

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

1 个答案:

这是Working Fiddle