Question

我有两个可以排序并与connectWith连接的div容器。在两者中都有可排序的项目，我可以按预期拖放。这些项目包含一些类，例如group1和group2。我们来调用容器container1和container2。我需要将group1个项目拖放到任何容器中，并将group2个项目拖放到container2内。我已经阅读过jQuery文档，但没有找到答案或想法如何做到这一点。

Answer 1

编辑我提出了一个更好地满足您需求的解决方案。例如，可以对此代码进行一些调整，以使group2的项目完全无法排序，即使它们已经在container1中。

JS：

$(function() {
    $(".container1,.container2").sortable();

    // on mousedown set the "connectWith" option of sortable depending on
    // whenever item that user may start dragging has class "group1" or not
    $(".container1 > li, .container2 > li").mousedown(function() {
        var $this = $(this);
        $this.parent().sortable("option", "connectWith", $this.hasClass('group1') ? '.connectedSortable' : false);
    })
});

HTML：

<ul class="container1 connectedSortable">
    <li class="group1">item 1.1</li>
    <li class="group2">item 1.2</li>
    <li class="group1">item 1.3</li>
    <li class="group2">item 1.4</li>
</ul>
<ul class="container2 connectedSortable">
    <li class="group1">item 2.1</li>
    <li class="group2">item 2.2</li>
    <li class="group2">item 2.3</li>
    <li class="group1">item 2.4</li>
    <li class="group2">item 2.5</li>
</ul>

Answer 2

尝试订阅receive event。我没有测试过这个，但我的猜测是，如果你返回false （jQuery中阻塞事件的标准模式），那么删除的项目将不会被添加到列表中。这里有一些伪代码可以帮助你入门......

$("...").sortable(
{
    receive: function ()
    {
        // assuming that "this" maps to the current object being dragged
        if (this.className.indexOf("...")) return false;
    }
});

过滤jQuery可排序项

2 个答案: