jQuery triable pour les sections séparées

Question

J'ai catégories principales et sous catégories. Je veux être en mesure de trier les sous-catégories lorsque l'affichage est comme:

Main Cat1 
    sub cat11   [handle] 
    sub cat12   [<>] 
    sub cat13   [<>] 
Main Cat2 
    sub cat21   [<>] 
    sub cat22   [<>] 
    sub cat23   [<>] 

Cela s'en HTML

<ul id="order-list-1" class="c_order_list"> 
        <li id="listItem-2" style=" margin-top:10px;">Sculpture<div style="float:right" align="right"><img src="images/add.png" style="vertical-align:middle; margin-bottom:2px;" onclick="showSubcategoryAddBox(2)"></div></li> 
             <li id="subcat-4" style="padding-left: 25px; width: 555px;">subcat1 Of maincat2<div style="float: right;" align="right"><img src="images/handle.png" alt="move" width="18" height="18" class="handle" /></div></li> 
             <li id="subcat-5" style="padding-left: 25px; width: 555px;">subcat2 Of maincat2<div style="float: right;" align="right"><img src="images/handle.png" alt="move" width="18" height="18" class="handle" /></div></li> 
</ul> 
<ul id="order-list-2" class="c_order_list"> 
        <li id="listItem-1" style=" margin-top:10px;">Mantel Clocks<div style="float:right" align="right"><img src="images/add.png" style="vertical-align:middle; margin-bottom:2px;" onclick="showSubcategoryAddBox(1)"></div></li> 
             <li id="subcat-1" style="padding-left: 25px; width: 555px;">subcat1 Mantel Clocks<div style="float: right;" align="right"><img src="images/handle.png" alt="move" width="18" height="18" class="handle" /></div></li> 
             <li id="subcat-2" style="padding-left: 25px; width: 555px;">subcat2 Mantel Clocks<div style="float: right;" align="right"><img src="images/handle.png" alt="move" width="18" height="18" class="handle" /></div></li> 
             <li id="subcat-3" style="padding-left: 25px; width: 555px;">subcat3 Mantel Clocks<div style="float: right;" align="right"><img src="images/handle.png" alt="move" width="18" height="18" class="handle" /></div></li> 
</ul> 

que je pouvais faire avec une seule section par exemple: principaux de tri des chats

$(document).ready(function() { 
    var order = null; 
    $("#order-list").load(location.href+" #order-list>*",""); 
    $("#order-list").sortable({ 
     handle : '.handle', 
     update : function (e, ui) { 
      order = $(this).sortable('serialize'); 
     $("#info").load("process-sortable.php?"+order); 
    } 
    }); 

Mais ne peux pas comprendre comment pourrais-je trier les sous-catégories dans leur section?

Answer 1

Il y a un endroit dans votre HTML que vous devez corriger, vos sous-catégories ont besoin de leurs propres balises

. Votre code HTML devrait suivre quelque chose de similaire à:

<ul id="main-cats"> 
<li><span class="main-cat-handle">Main Cat 1</span> 
    <ul id="main-cat-1"> 
    <li id="sub-cat-1"><span class="sub-cat-handle">Sub Cat 1</span></li> 
    <li id="sub-cat-2"><span class="sub-cat-handle">Sub Cat 2</span></li> 
    <li id="sub-cat-3"><span class="sub-cat-handle">Sub Cat 3</span></li> 
    </ul> 
</li> 
</ul>

Maintenant, vous devriez être en mesure d'appeler sortable sur #main-cats et #main-cat-X en utilisant les poignées spécifiées, cela devrait vous permettre de trier la façon dont vous désirez.