Сортируемый не работает с вкладками

Привет, Я использую jQuery для сортировки между несколькими списками. Проблема возникает, когда я добавляю соединение с несколькими списками вкладок вместе. Желаемое поведение показано в этой скрипке http://jsfiddle.net/vmV6F/. (просто перетащите слово с одной вкладки в нужную позицию в приведенном выше предложении). Но, как вы видите в этой скрипке http://jsfiddle.net/prQCR/, как только я добавляю класс.con для подключения вкладок два и три, я больше не могу перемещать ни одного слова в любом из контейнеров табуляции ни на первый или вторых позиций.

Что я делаю не так?

код ниже

HTML

<div id="sen" class="con">
    <p>The</p>
    <p>cat</p>
    <p>was</p>
    <p>very</p>
    <p>bad</p> 
</div>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">one</a></li>
    <li><a href="#tabs-2">two</a></li>
    <li><a href="#tabs-3">three</a></li>
  </ul>

  <div id="tabs-1" class="con">
      <p>one</p>
      <p>one</p>
      <p>one</p>
      <p>one</p>
  </div>

  <div id="tabs-2" >
     <p>two</p>
      <p>two</p>
      <p>two</p>
  </div>

  <div id="tabs-3"  >
    <p>three</p>
     <p>three</p>
     <p>three</p>
  </div>

JQuery

$(function() {
    $("#sen, #tabs-1, #tabs-2, #tabs-3").sortable({
        connectWith: ".con"
    }).disableSelection();
 });

$(function() {
    $("#tabs").tabs();
});

CSS

#sen {
    width: 978px;
    height: 200px;
    border: 2px solid black;
    padding-left: 11px;
    padding-right: 11px;
}

#sen p {
    float: left;
    padding-left: 9px;
    padding-right: 9px;
    font-family: Verdana;
    font-size: 50px;     
}

#tabs-1 p, #tabs-2 p, #tabs-3 p  {
    float: left;
    padding: 5px;
    font-size: 20px; 
}

#tabs  {
   float: left;
   width: 100%;
}

Благодарю.