2013-05-09 39 views
1

我用這個jQuery的例子:http://jqueryui.com/sortable/#connect-lists-through-tabsjQuery的保存排序列表

<script> 
$(document).ready(function() { 
    $(function() { 
    $(".connectedSortable").sortable().disableSelection(); 
    var $tabs = $("#tabs").tabs(); 

    var $tab_items = $("ul:first li", $tabs).droppable({ 
     accept: ".connectedSortable li", 
     hoverClass: "ui-state-hover", 
     drop: function(event, ui) { 
      var $item = $(this); 
      var $list = $($item.find("a").attr("href")) 
      .find(".connectedSortable"); 

      ui.draggable.hide("slow", function() { 
       $tabs.tabs("option", "active", $tab_items.index($item)); 
      $(this).appendTo($list).show("slow"); 
      }); 
     } 
    }); 
}); 
    }); 
</script> 

的HTML:

<div id="tabs"> 
<ul> 
    <li><a href="#Category1">Category1</a></li> 
    <li><a href="#Category2">Category2</a></li> 
</ul> 

<div id="Category1"> 
    <ul id="sortable-Category1" class="connectedSortable ui-helper-reset"> 
     <li class="ui-state-default">Forum 1</li> 
     <li class="ui-state-default">Forum 2</li> 
    </ul> 
</div> 
<div id="Category2"> 
    <ul id="sortable-Category2" class="connectedSortable ui-helper-reset"> 
     <li class="ui-state-default">Forum 3</li> 
     <li class="ui-state-default">Forum 4</li> 
    </ul> 
</div 

但現在我想,當我在改變一些東西列出重新排序項目的時間。 我知道如何通過AJAX等方式將更改寫入數據庫,但在拖動列表中的某些內容時會調用哪種方法+如何在現有的JavaScript中實現此功能?

有沒有一種方法可以以'[id-of-the-li-item] - [列表中的編號]'的格式獲取列表的順序,以便我可以使用數據庫命名爲'訂單'的項目的順序是指定的?

我想實現這個是:我有一個論壇與類別&論壇。我想使用上述代碼訂購論壇/類別(在一個類別論壇順序和移動論壇到其他類別)

+0

第一次顯示列表時的HTML是什麼? – balexandre 2013-05-09 15:12:05

+0

我會使用'data-'元素來幫助你獲得id的順序,例如:http://jsbin.com/ulolor/1/ – balexandre 2013-05-09 15:28:29

回答

2
 $(".connectedSortable").sortable({ 
      update: function (event, ui) { 
       var newSeq = [], p = ui.item.parent(), parentId = p.parent().prop('nodeName') === "LI" ? p.parent().attr('id') : 0; 
       ui.item.parent().children().each(function() { 
        newSeq.push(this.id); 
       }); 
       // here you have newSeq... now update it via ajax 
      } 
     }); 

這依賴於元件的ID。將有newSeq[]