jQueryUI Sortable: how do sort multiple lists without nesting
<p>I'm attempting to sort multiple lists distinguished by selector (".fruit" and ".color"), but without putting them into separate HTML containers.</p>

<pre><code>&lt;ul id="sortable"&gt;
    &lt;li class='fruit'&gt;orange&lt;/li&gt;
    &lt;li class='fruit'&gt;apple&lt;/li&gt;
    &lt;li class='color'&gt;yellow&lt;/li&gt;
    &lt;li class='color'&gt;red&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Please see this fiddle: <a href="https://jsfiddle.net/s9kqLh58/" rel="nofollow">https://jsfiddle.net/s9kqLh58/</a></p>

<p>Thus, elements of each list should be siblings, but separately sortable based on the item selector. The effect should be that the 2 types of list items (colors and fruits) should be non-mixable - the colors would always be at the bottom, and the fruits would always be at the top.</p>

<p>As you can see by the fiddle, the colors are sortable, but not the fruits.</p>

<p>Is there a way to do this with jQueryUI, or does anyone know of an extension to jQueryUI sortable that might permit what I'm trying to do?</p>