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

Question

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

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

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>

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

Answer 1

我想到了。

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

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

但是如果我在整个事情周围放置一个 id = "my_id" 的 div 然后做

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

另一种方法是用 div 包围每个 ul。然后他们可以有相同的ID。

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

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