jQuery UI Sortable and Draggable List Interaction Not Working Quite Right

I have a recipe tracker tool for World of Warcraft players here: http://www.wowgeeks.com/tracker.php?item=recipes. 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 connectToSortable set to a class that the first two lists share.

HTML for the three lists:

<div class="sub-third">
    <h1>My Recipes</h1>
    <div class="tracker-list sortable" id="have-list">
    </div>
</div>
<div class="sub-third">
    <h1 style="color: #f90;">Recipes I Need</h1>
    <div class="tracker-list sortable" id="need-list">
    </div>
</div>
<div class="sub-third">
    <h1 style="color: #eee;">Add Recipes</h1>
    <div class="tracker-list" id="add-list">
        <div class="tracker-item" id="itemid_123">
            <a class="tracker-icon" rel="item=43509"><img class="wow-icon" src="/images/icons/small/inv_scroll_03.jpg" alt="Icon" /></a>
            <p>Bad Clams</p>
        </div>
        <!-- ETC... -->
    </div>
</div>

And here is the JavaScript for the draggable/sortables:

$(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 += '&userid=1&itemtype=Recipes&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
});

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 fin开发者_Go百科e. You can try the link above and test it out for yourself. Can anybody tell me what the problem might be?

---

$('#add-list .tracker-item').draggable({
    connectToSortable   : '.target-list',

You're connecting the third list only to the second list here. If you make add the target-list class to the first list you can then drag from third to first.