Question

我试图对由选择器区分的多个列表进行排序（＆＃34; .fruit＆＃34;和＆＃34; .color＆＃34;），但不将它们放入单独的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/

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

正如你可以看到的那样，颜色是可以分类的，但不是水果。

有没有办法用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

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

1 个答案: