jQuery UI 可排序和可拖动列表交互不太正确

jQuery UI Sortable and Draggable List Interaction Not Working Quite Right

本文关键字：交互 拖动 UI 排序 jQuery 列表      更新时间：2023-09-26

我这里有一个魔兽世界玩家的食谱跟踪工具：http://www.wowgeeks.com/tracker.php?item=recipes。我有三个定制设计的列表："有"列表、"需要"列表和可供选择的原始项目列表。我将最后一个列表作为可拖动列表，其connectToSortable设置为前两个列表共享的类。

三个列表的 HTML：

<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>

这是可拖动/可存储的JavaScript：

$(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
});

出于某种原因，当我将一个项目从第三个列表拖到第一个列表一两次后，它突然拒绝合作。第三个列表中的项目突然变得无法拖动。但是将项目从第三个列表拖动到第二个列表就可以了。您可以尝试上面的链接并亲自测试。谁能告诉我问题可能是什么？

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

您在此处仅将第三个列表连接到第二个列表。如果将目标列表类添加到第一个列表，则可以从第三个列表拖动到第一个列表。

相关文章：