title: jQuery UI Sortable and Draggable List Interaction Not Working Quite Right
body: <p>I have a recipe tracker tool for World of Warcraft players here: <a href="http://www.wowgeeks.com/tracker.php?item=recipes" rel="nofollow">http://www.wowgeeks.com/tracker.php?item=recipes</a>. I have three custom-designed lists: a "Have" list, a "Need" list, and the list of original items to choose from. I have the last list as a draggable, with its <code>connectToSortable</code> set to a class that the first two lists share.</p>
  
  <p>HTML for the three lists:</p>
  
  <pre><code>&lt;div class="sub-third"&gt;
      &lt;h1&gt;My Recipes&lt;/h1&gt;
      &lt;div class="tracker-list sortable" id="have-list"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="sub-third"&gt;
      &lt;h1 style="color: #f90;"&gt;Recipes I Need&lt;/h1&gt;
      &lt;div class="tracker-list sortable" id="need-list"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="sub-third"&gt;
      &lt;h1 style="color: #eee;"&gt;Add Recipes&lt;/h1&gt;
      &lt;div class="tracker-list" id="add-list"&gt;
          &lt;div class="tracker-item" id="itemid_123"&gt;
              &lt;a class="tracker-icon" rel="item=43509"&gt;&lt;img class="wow-icon" src="/images/icons/small/inv_scroll_03.jpg" alt="Icon" /&gt;&lt;/a&gt;
              &lt;p&gt;Bad Clams&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- ETC... --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the JavaScript for the draggable/sortables:</p>
  
  <pre><code>$(function() {
      $('#add-list .tracker-item').draggable({
          connectToSortable   : '.sortable',
          helper              : 'clone'
      });
  
      $('#have-list, #need-list').sortable({
          connectWith : '.tracker-list',
          cursor      : 'move',
          revert      : true,
          placeholder : 'ui-state-highlight',
          update      : function() {
              var order = $(this).sortable('serialize');
              order += '&amp;userid=1&amp;itemtype=Recipes&amp;charid=0';
              //alert(order);
          }
      });
  
      $('.tracker-list, .tracker-item').disableSelection(); // So dragging doesn't accidentally select any text
  
      $('#have-list, #need-list').sortable('refresh'); // Refresh the lists
  });
  </code></pre>
  
  <p>For some reason, after I drag an item from the 3rd list to the 1st list one or two times, it suddenly refuses to cooperate. The items in the 3rd list suddenly become un-draggable. But dragging items from the 3rd to the 2nd list works just fine. You can try the link above and test it out for yourself. Can anybody tell me what the problem might be?</p>