Within an admin I created there is a nested sortable unordered list
with the jQuery UI Sortable plugin to allow the user to reorder list
items in the second (ul id="sortlist4") and third (ul
id="sortlistb23") level nested lists. The first level list (ul
id="sortablelist") cannot be sorted. Here is an example:
<ul id="sortablelist">
<li>
<img src="source here" id="expand4" alt="alt info" />
<b><a href="link here">Page Title</a></b> -
First 150 characters of page content...
<ul id="sortlist4">
<li id="listItem_23">
<img src="source here" alt="move" class="handle" />
<img src="source here" id="expandb23" alt="alt info" />
<b><a href="link here">Page
Title</a></b> -
First 150 characters of page content...
<ul id="sortlistb23">
<li id="listItemb_69">
<img src="source here" alt="move"
class="handle" />
<b><a href="link here">Page
Title</a></b> -
First 150 characters of page content...
</li>
<li id="listItemb_70">
<img src="source here" alt="move"
class="handle" />
<b><a href="link here">Page
Title</a></b> -
First 150 characters of page content...
</li>
</ul><!--sortlistb23-->
<script type="text/javascript">
//sortable list
$(document).ready(function() {
$("#sortlist4").sortable('disable');
$("#sortlistb23").sortable
({
handle : '.handle',
update : function () {
var order =
$('#sortlistb23').sortable('serialize'); $
("#info").load("process-sortable2.php?"+order); $
("#sortlist4").sortable('enable');
}
});
});
//show/hide details
$(document).ready(function($) {
$("img#expandb23").click(function(){
$("ul#sortlistb23").toggle("slow"); return false;
});
});
</script>
</li><!--listItem_23-->
</ul><!--sortlist4-->
<script type="text/javascript">
//sortable list
$(document).ready(function() {
$("#sortlist4").sortable({
handle : '.handle',
update : function () {
var order =
$('#sortlist4').sortable('serialize'); $("#info").load
("process-sortable.php?"+order);
}
});
});
//show/hide details
$(document).ready(function($) {
$("img#expand4").click(function(){
$("ul#sortlist4").toggle("slow"); return false;
});
});
</script>
</li>
</ul><!--sortablelist-->
When trying to reorder items in the third level (ul id="sortlistb23")
nested list, the list item of the second level list (li
id="listItem_23") which houses the third level list also moves. To
stop this from happening, when the handle of a third level list item
is clicked I disabled the parents sortable ability. Then once the
order of the third level list is updated, the parents sortable ability
is reinstated. Is there a better way to do this? I tried using
"connectWith" to tie the third level list and the list of it's parent,
but no luck.
The jQuery functions appear within the code to pickup the id numbers
(appear after the 'sortlist' and 'sortlistb' ids of the lists /
'listItem' and 'listItemb' of the list items) that are generated by a
php foreach statement, which creates the hierarchy I needed.
Any suggestions are appreciated. I am using jQuery 1.3.1 and jQuery UI
1.7.1.
Thanks in advance for your time and help!
