Jquery.ui sorting question

Question

I created a nested list with a drag and drop function. My problem is that I want each nesting sorted by itself. For instance:

  -first_level
 -first_level
  -second_level
  -second_level
 -first_level

The "first level" should not be included in the "Second level" and vice versa. I thought I could do this with the containment option, but there are no dice there. It works with maintaining the second level from the first level, but not vice versa.

Here is my JS example and list:

$("#sort_list").sortable({ containment: '#sort_list', axis: 'y', revert: true, items: 'li', opacity: 0.8 }); $(".sub_list").sortable({ containment: 'parent', axis: 'y', revert: true, items: 'li', opacity: 0.8, }); $("#sort_list").disableSelection(); <ul id="sort_list"> <li>one</li> <li>two <ul class="sub_list"> <li>sub one</li> <li>sub two</li> </ul> </li> <li>three</li> <li>four</li> </ul> 

Any ideas? Thanks guys!

Answer 1

Well, it looks like I found a problem. I declared: items: 'li', and therefore it did not detect UL as a container / sortable element. Many thanks to karim79 for helping me understand all this :)

Below is the working code (basically saying: "Everyone stays in their container"):

  $("#sort_list").sortable({ containment: 'parent', axis: 'y', revert: true, opacity: 0.8 }); $(".sub_list").sortable({ containment: 'parent', axis: 'y', revert: true, opacity: 0.8, }); $("#sort_list").disableSelection(); <ul id="sort_list"> <li>one</li> <li>two <ul class="sub_list"> <li>sub one</li> <li>sub two</li> </ul> </li> <li>three</li> <li>four</li> </ul> 

Now that we have found that the item: li thing is cut out, we can even remove the containment: parent from the top list without fear of collision between lists.

Answer 2

Try specifying the containment parameter with a complex selector, for example:

 $("#sort_list").sortable({ containment: '#sort_list:not(.sub_list)', axis: 'y', revert: true, items: 'li', opacity: 0.8 }); 

This should do the trick if you are using jQuery 1.3+:

(from the manual )

Like jQuery 1.3: not () also supports comma-separated selectors and complex selectors, such as :: not (div a) and: not (div, a).

The jQuery sorting guide says containment :

Constraints that move within the boundaries of the specified element - can be a DOM element, "parent", 'document', 'window' or jQuery selector.