过滤jQuery可排序项目

Question

我有两个可排序的div容器，并与connectWith连接。 两者都有可排序的项目，我可以按预期进行拖放。 这些项目具有一些类，例如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事件 。 我还没有测试过，但是我的猜测是，如果您返回false （用于阻止jQuery中事件的标准模式） ，那么放置的项目将不会添加到列表中。 这是一些伪代码，可以帮助您入门...

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