title: multiple sortable lists using jqueryui - don't want items to mix between list groups
body: <p>I have two pairs of drag/drop/sortable lists using JqueryUI.http://jqueryui.com/demos/sortable/</p>
  
  <p>My problem is that I can move items from sortable1, sortable2 into sortable3 and 4. I want them to be debated. So items can only move between ( 1 and 2 ) and (3 and 4).</p>
  
  <p>Do I have to assign a different class to sortable3 and sortable4 for this to happen? Is there anyway I can somehow combine the function?</p>
  
  <pre><code>$(function() {
          $( "ul.droptrue" ).sortable({
              connectWith: "ul"
          });
  
          $( "ul.dropfalse" ).sortable({
              connectWith: "ul",
              dropOnEmpty: false
          });
  
          $( "#sortable1, #sortable2" ).disableSelection();
          $( "#sortable3, #sortable4").disableSelection();
  
  });
  
  
  &lt;ul id="sortable1" class='droptrue'&gt;
      &lt;li class="ui-state-default"&gt;Can be dropped..&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;..on an empty list&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 3&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 4&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="sortable2" class='dropfalse'&gt;
      &lt;li class="ui-state-highlight"&gt;Cannot be dropped..&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;..on an empty list&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 3&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 4&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="sortable3" class='droptrue'&gt;
      &lt;li class="ui-state-default"&gt;Can be dropped..&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;..on an empty list&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 3&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 4&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="sortable4" class='dropfalse'&gt;
      &lt;li class="ui-state-highlight"&gt;Cannot be dropped..&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;..on an empty list&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 3&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 4&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>