jQuery的可排序，排序多个项目通过

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> 

排序是在DB更新，以保持一切为了如下。

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

您可以在插件选项

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

，但是这不会阻止用户最后一个元素拖放到第一个“组”（1之间recordsArray_8和2）

添加items: '.1, .5'如果你想严格的“无级”，你可以使用一个功能项：（似乎sadely项目并未有回调）

$("#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; 
} 

。

，这里是a fiddle你