IEnumerator IEnumerator - 5 months ago 15
Javascript Question

jquery sortable items question

Given the following structure, can the div which contains the sortable list be sorted? I ask because with the latest jquery 1.3 version it won't allow sorting of the divs. Is there any limitation with jQuery where it can't sort parent elements which contain an already sortable list, or is it because the parent is a div and not an LI element? Any ideas anyone?

<div class="row">
<ul class="sortable">
<li>test1</li>
<li>test2</li>
</ul>
</div>
<div class="row">
<ul class="sortable">
<li>test1</li>
<li>test2</li>
</ul>
</div>
<div class="row">
<ul class="sortable">
<li>test1</li>
<li>test2</li>
</ul>
</div>

Answer

I guess there is a misunderstanding

This command

$('div.row').sortable()

will actually make the uls in your divs sortable. Which doesn't make sense as there is only one ul in every div and sorting a single element doesn't make sense. (Demo page: http://jsbin.com/ayiwu)


If you want to sort the divs (not the uls or lis) you could use this line

$("div.row").wrapAll("<div></div>").eq(0).parent().sortable();

Now the div's themselves are sortable (Demo page: http://jsbin.com/upixa


If you want the divs and the lis (not the uls which doesn't make sense when there is only one ul per div) to be sortable at the same time

$("div.row").wrapAll("<div></div>").eq(0).parent().sortable();
$("div.row").sortable({ items: "li" });

Demo page: http://jsbin.com/ujatu

If you want something else please post a comment

P.S.: Sorry for the horrible CSS on the demo pages. Just for clarity that you can see which element you are clicking on