title: jQuery sortable - move item between 2 connected lists keeping count
body: <p>I have two list with 6 items, connectedWith a class of <code>.connectedSortable</code> When I move an item between the two lists, it gets appended to the target list, and removed from the source list. So now we have a list with 5 items, and a list with 7 items. How can the items remain 6 items per list, and we just move the top most in the target list to the first list (automatically rearranges itself in the same order as if it were one list)?</p>
  
  <pre><code>&lt;ul class="connectedSortable"&gt;
      &lt;li class="ui-state-default"&gt;Item 1&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 2&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;li class="ui-state-default"&gt;Item 6&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="connectedSortable"&gt;
      &lt;li class="ui-state-highlight"&gt;Item 1&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 2&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;li class="ui-state-default"&gt;Item 6&lt;/li&gt;
  &lt;/ul&gt;
  
  $( ".connectedSortable" ).sortable({
      connectWith: ".connectedSortable"
  }).disableSelection();
  </code></pre>
  
  <p><strong>To clarify:</strong> The number of lists may be 2 or more. But what I am after is the fixed number of 6 items per list and correct automatic rearrangement as sortable does if it were single list. An example is if you move item 3 from list1 to list2 after item 4, then the outcome should be this:</p>
  
  <pre><code>&lt;ul class="connectedSortable"&gt;
      &lt;li class="ui-state-default"&gt;Item 1&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 2&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;li class="ui-state-default"&gt;Item 6&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 1&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="connectedSortable"&gt;
      &lt;li class="ui-state-highlight"&gt;Item 2&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 3&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;Item 5&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;Item 6&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5RjV5/" rel="nofollow">jsFiddle</a></p>