如何在數據庫中存儲已排序的jQueryUI排序列表

Question

我已經使用jqueryui實現了拖放排序列表，如下例所示。

HTML

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight">Item 1</li> 
    <li class="ui-state-highlight">Item 2</li> 
    <li class="ui-state-highlight">Item 3</li> 
    <li class="ui-state-highlight">Item 4</li> 
    <li class="ui-state-highlight">Item 5</li> 
</ul> 

的Javascript

<script> 
    $(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
    }); 
    </script> 

我已經創建了下面這一切的更新按鈕。在更新按鈕被按下後，我必須將重新排列的列表存儲到數據庫中。

但我不知道該怎麼做，我需要一些建議，我不知道從哪裏開始。

謝謝。

Answer 1

隨着項目的單個列表，你可以這樣做

<form> 
<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default">Item 1<input type="hidden" name="sortorder[]" value="1" /></li> 
    <li class="ui-state-efault">Item 2<input type="hidden" name="sortorder[]" value="2" /></li> 
    <li class="ui-state-default">Item 3<input type="hidden" name="sortorder[]" value="3" /></li> 
    <li class="ui-state-default">Item 4<input type="hidden" name="sortorder[]" value="4" /></li> 
    <li class="ui-state-default">Item 5<input type="hidden" name="sortorder[]" value="5" /></li> 
</ul> 
</form> 


$("#sortable1").sortable({ 
    cursor: "move", 
    items: "> li", 
    update: function() { 
     var neworder = $('#sortable1').parent('form').serialize(); 
     $.ajax({ 
      data: neworder, 
      type: 'POST', 
      url: 'updateportfolioorder.php' 
     }); 
    } 
});