CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortablejquery-ui-draggable
TerranRich
TerranRich

Reputation: 1298

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 fine. You can try the link above and test it out for yourself. Can anybody tell me what the problem might be?

Upvotes: 2

Views: 1901

Answers (1)

wewals
wewals

Reputation: 1447

$('#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.

Upvotes: 1

Related Questions