Jquery ui Jquery可排序：列表中的列表。子列表不能混合

我在列表中有jquery可排序列表。在下面的例子中，我想对水果和汽车进行分类，但汽车不能与水果混合

此外，汽车和水果类别也应该是可排序的，以便汽车可以在水果上方移动。在这种情况下，如果你移动水果，苹果和香蕉应该随之移动

Fruits
    apples
    bananas
Cars
    ford
    volvo

我有：

<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>

果实

苹果
香蕉


汽车

福特
沃尔沃

汽车和水果可以适当移动，随身携带物品，但水果和汽车不能与自己的同类呆在一起

我明白了

如果我这样做，那么列表将混合：

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

但如果我在整件事周围放一个id=“my_id”的div，然后这样做，它们就不会混合

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

另一种方法是用一个div围绕每个ul，然后它们可以有相同的id

另一种方法是为列表提供不同的ID：

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

---

您确实不应该有具有相同id属性的元素。这应该是独一无二的。