Question

I have jquery sortable lists within lists. In the example below, I want to sort the fruits with respect to each other and the cars with respect to each other, but cars may not mix with fruits.

Also, the Cars and the Fruit categories should also be sortable so that Cars can be moved above Fruits. In that case, if you move Fruits, apples and bananas should move with it.

Fruits
    apples
    bananas
Cars
    ford
    volvo

I have:

<ul id="sortable">
    <li>Fruits
        <ul id="sortable" > 
          <li > Apples  </li> 
          <li >bananas  </li> 
        </ul>
    </li> 
    <li >Cars
        <ul id="sortable" > 
          <li > Ford  </li> 
          <li >Volvo  </li> 
        </ul>
    </li> 
</ul>

Cars and fruits can be moved properly, taking their items with them, but the fruits and cars do not stay with their own kind.

Answer 1

I figured it out.

If I do this, then the lists mix:

 $( "#sortable" ).sortable();

But they do not mix if I put a div with id = “my_id” around the whole thing and then do

$( "#my_id ul" ).sortable();

Another way is to surround each ul with a div. Then they can have the same id.

Another way is to give the lists different ids:

 $( "#sortable1",  "#sortable2" ,  "#sortable3").sortable();