jQuery sortable for separated sections
I have main categories and sub categories. I want to be able to sort subcategories when the display is like:
Main Cat1
sub cat11 [handle]
sub cat12 [<>]
sub cat13 [<>]
Main Cat2
sub cat21 [<>]
sub cat22 [<>]
sub cat23 [<>]
This turned in 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" sty开发者_如何转开发le="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>
I could do with one section only eg: sorting main cats
$(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);
}
});
But can't figure out how would I be able to sort the subcategories in their section?
There is a spot in your HTML that you need to fix, your subcategories need their own
<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>
Now you should be able to call sortable on #main-cats
and #main-cat-X
using the specified handles, this should allow you to sort the way you desire.
精彩评论