过滤jQuery可排序的项目

Filter jQuery sortable items

本文关键字：项目 排序 jQuery 过滤      更新时间：2023-09-26

我有两个div容器是可排序的，并与connectWith连接。两者都有可排序的项目，我可以按需拖放。这些项目有一些类别，如group1和group2。我们称容器为container1和container2。我需要使group1项目被拖放到任何容器中，group2项目被拖放到container2内部。我已经阅读了jQuery文档，但没有找到答案或一个想法如何做到这一点。

尝试订阅接收事件。我还没有对此进行测试，但我的猜测是，如果您返回false (jQuery中阻止事件的标准模式)，则丢弃的项目将不会添加到列表中。这里有一些伪代码来帮助你开始…

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

EDIT我想出了一个更好地满足您需求的解决方案。这段代码可以稍微调整一下，例如，使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>
相关文章：