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

したがって、各リストの要素が兄弟であるべきであるが、別々の項目選択に基づいてソート。 2種類のリスト項目（色と果物）がミックスできないようにする必要があります。色は常に下になり、果物は常に上に表示されます。

フィドルで分かるように、色はソート可能ですが、果物ではありません。

jQueryUIでこれを行う方法はありますか、誰かが私がしようとしていることを許可するjQueryUIソート可能な拡張機能を知っていますか？

<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で：あなたがこれを行う必要がある

Answer 1

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

は、返信用このJsFiddle