Question

我使用jQuery UI有两个连接的可排序列表，我发现当你点击一个列表中的一个元素时，它会将它添加到另一个列表的底部，反之亦然。我面临的问题是它以一种方式工作，而不是另一种方式。当我单击第一个列表中的项目时，它会正确地将其移动到另一个列表。当我尝试走另一条路时，它会将项目附加到自身。这个小提琴演示了我遇到的问题：http://jsfiddle.net/qcF9G/。这也是代码：

HTML

<div class="container">
    EXCLUDE
    <ul id="exclude" class="connectedSortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>

<div class="container">
    INCLUDE
    <ul id="include" class="connectedSortable"></ul>
</div>

Javascript（jQuery）

$("#exclude, #include").sortable({
    connectWith: ".connectedSortable",
    distance: 10
}).disableSelection();

$("#exclude li").click(function() {
    $(this).detach().appendTo("#include");
});

$("#include li").click(function() {
    $(this).detach().appendTo("#exclude");
});

Answer 1

试试这个：

$("li").click(function() {
    if ($(this).closest("ul").attr("id") === "exclude"){
        $(this).appendTo("#include");
    }
    else {
        $(this).appendTo("#exclude");
    }
});

我在JS小提琴上进行了测试，但它确实有效。

您发布的JS只是在您更新时才添加点击侦听器。由于包含无序列表中没有元素，因此包含ul中的列表项都没有监听点击。

例如，尝试使用您之前使用的相同js的这个html：

<div class="container">
    EXCLUDE
    <ul id="exclude" class="connectedSortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

<div class="container">
    INCLUDE
    <ul id="include" class="connectedSortable">
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>

第4项和第5项将移至排除并仅停留在那里。 1,2和3只会移动到包含并留在那里

jQuery连接可排序 - 单击以移动无法正常工作

1 个答案: