jQuery UI Sortable：如何在不嵌套的情况下对多个列表进行排序

Question

我正在尝试对由选择器（“.fruit”和“.color”）区分的多个列表进行排序，但没有将它们放入单独的 HTML 容器中。

<ul id="sortable">
    <li class='fruit'>orange</li>
    <li class='fruit'>apple</li>
    <li class='color'>yellow</li>
    <li class='color'>red</li>
</ul>

请看这个小提琴：https://jsfiddle.net/s9kqLh58/

因此，每个列表的元素应该是同级的，但可以根据项目选择器单独排序。效果应该是两种类型的列表项（颜色和水果）应该是不可混合的 - 颜色总是在底部，而水果总是在顶部。

正如您在小提琴中看到的，颜色是可排序的，但不是水果。

有没有办法用 jQueryUI 做到这一点，或者有人知道 jQueryUI 可排序的扩展可能允许我正在尝试做的事情吗？

Answer 1

你需要这样做：

<ul id="sortable">
 <div class="fruit">
   <li>orange</li>
   <li>apple</li>
 </div>
 <div class="color">
   <li>yellow</li>
   <li>red</li>
 </div>
</ul>

在你的 Javascript 中：

  $(function() {
    $( ".fruit" ).sortable();
    $( ".fruit" ).disableSelection();
    $( ".color" ).sortable();
    $( ".color" ).disableSelection();
  });

看看这个JsFiddle