title: JQuery UI Sortable - limit drop to certain elements
body: <p>I have a number of ul's which the user is able to sort li's into.  I have 2 different types of li and need to restrict which list they can be dropped into.  Here is a small example:</p>
  
  <pre><code>&lt;ul class="top"&gt;
      &lt;li class=typeA"&gt;Item&lt;/li&gt;
      &lt;li class=typeA"&gt;Item&lt;/li&gt;
      &lt;li class=typeB"&gt;Item&lt;/li&gt;
          &lt;ul class="sub"&gt;
              &lt;li class=typeB"&gt;Item&lt;/li&gt;
              &lt;li class=typeB"&gt;Item&lt;/li&gt;
              &lt;li class=typeB"&gt;Item&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/ul&gt;
  
  &lt;ul class="top"&gt;
      &lt;li class=typeA"&gt;Item&lt;/li&gt;
      &lt;li class=typeA"&gt;Item&lt;/li&gt;
      &lt;li class=typeA"&gt;Item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <ol>
  <li><p>TypeA can only ever appear at the top level, and must only be able to be dropped into another top level group.</p></li>
  <li><p>TypeB can appear at either top or sub level and must be able to be dropped into either group.</p></li>
  <li><p>Also, the sub ul group must be able to be dropped from one top group to another.</p></li>
  </ol>
  
  <p>Using the following code, I am able to acheive point 1 and partly point 2, but when a TypeB has been moved from the sub group into the top group it can then never go back:</p>
  
  <pre><code>$(function() {
      $('.connectedSortable').sortable({
          'items': '&gt; li',
          'connectWith': '.connectedSortable'
      });
      $('.subList').sortable({
          'items': 'li',
          'connectWith': '.connectedSortable'
      });
  });
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks</p>