jQuery Sortable，按類別對多個項目進行排序

Question

我有一組可排序的清單項目，類似於以下內容...

  <ul id="item_list" class="ui-sortable">
  <li id="recordsArray_1">item</li>    
  <li id="recordsArray_2" class='1'>item</li>
  <li id="recordsArray_3" class='1'>item</li>
  <li id="recordsArray_4" class='1'>item</li>
  <li id="recordsArray_5">item</li>    
  <li id="recordsArray_6" class='5'>item</li>
  <li id="recordsArray_7" class='5'>item</li>
  <li id="recordsArray_8" class='5'>item</li>
  </ul>

排序在數據庫中更新，以使所有內容保持如下順序。

  $(document).ready(function(){ 
  $(function() {
  $("#item_list").sortable({ opacity: 0.6,   cursor: 'move', update: function() {
  var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
  $.post("http://"+document.domain+"/includes/updateDB.php", order,function(theResponse){
    setClass()
        });
        }
        });
        });

        });

標頭項目永遠不會有一個類，子元素將有標頭的一個類。 是否有可能對標題進行排序以對標題及其元素進行分類？ 即，拖動標題將拖動所有子元素，但子元素將單獨拖動。

Answer 1

您可以在插件選項中添加items: '.1, .5'

 $("#item_list").sortable({ opacity: 0.6, items: '.1, .5', cursor: 'move', update: function()

但這不會阻止用戶將最后一個元素拖放到第一個“組”中（介於1和2之間的recordsArray_8）

如果您想要嚴格的“無類”，則可以對項目使用函數：

$("#item_list").sortable({ opacity: 0.6, items: selectSortItems("#item_list"), cursor: 'move', update: function()...

function selectSortItems (sel) {
  var list = [];
    $(sel).find('li').each( function () {
        if ( $(this).attr('class') ) { list.push(this) };
    });

    return list;
}

（悲傷的項目似乎沒有回調）。

這是給你的小提琴