Question

I have created a nested list with drag/drop functionality. My issue is that I want each nesting to sort in itself. For example:

-first_level
-first_level
 -second_level
 -second_level
-first_level

“First level” should not be able to go into “Second Level” and vice versa. I thought I could do this with the containment option but no dice there. It works with keeping the second levels out of the first level but not the other way around.

Here is my example JS 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

Okay, looks like I found the problem. I was declaring: items: ‘li’ and so it wasn’t detecting the UL as a container/sortable item. A big thanks to karim79 for helping me think all this through 🙂

Below is the working code (it’s basically saying “Everyone stay in their own 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 got the “item: li” thing sorted out we can even remove containment: ‘parent’, from the top list without fear of the lists colliding.