jQuery сортируется для отдельных разделов - PullRequest
3 голосов
/ 15 марта 2010

У меня есть основные категории и подкатегории. Я хочу, чтобы иметь возможность сортировать подкатегории, когда дисплей выглядит так:

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

Это превратилось в 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> 

Я мог бы сделать только с одним разделом, например: сортировка основных кошек

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

Но не могу понять, как я смогу отсортировать подкатегории в их разделе?

1 Ответ

2 голосов
/ 15 марта 2010

В вашем HTML есть место, которое вам нужно исправить, ваши подкатегории нуждаются в собственных тегах

    . Ваш HTML должен следовать чему-то похожему на:
    <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&gt
     </li>
    </ul>

    Теперь у вас должна быть возможность вызывать sortable на #main-cats и #main-cat-X с использованием указанных дескрипторов, это должно позволить вам сортировать по вашему желанию.

    ...