jquery sortable - 防止2个列表之间的重复答案

【问题标题】：jquery sortable - prevent duplicates between 2 listsjquery sortable - 防止2个列表之间的重复
【发布时间】：2013-03-27 20:14:52
【问题描述】：

如标题所示，如何防止两个列表之间出现重复。我正在尝试停止 #selected 列表中的重复项。我怀疑它在接收事件中完成，但我没有任何运气。

    $(function () {

    $("#options").sortable({
        connectWith: $("#selected"),
        helper: 'original',
        revert: true,
        tolerance: "pointer",
    });

    $("#selected").sortable({
        connectWith: $("#options"),
        helper: 'original',
        receive: function (event, ui) {            
        },
    });

    $("#options,#selected").disableSelection();

    $("#SkillGroups").change(function () {
        $.ajax({
            type: "POST",
            url: "/Contractor/Contractor/GetSkillsBySkillGroup",
            data: { skillGroupId: $("#SkillGroups").val() },
            success: function (result) {
                $loadList(result);
            }
        })
    });
});

【问题讨论】：

标签： jquery jquery-ui-sortable

【解决方案1】：

终于解决了。当你看到解决方案时有点明显。可能还有其他方法可以做到这一点。

 $("#selected").sortable({
        connectWith: $("#options"),
        helper: 'original',
        receive: function (event, ui) {

            var identicalItemCount  = $("#selected").children('li:contains(' + ui.item.text() + ')').length;
            alert(identicalItemCount);
            if (identicalItemCount > 1) {
                alert("Ahem.... we have a duplicate!!");
                $("#selected").children('li:contains(' + ui.item.text() + ')').first().remove();
            }
        },
    });

【讨论】：

非常好。不过，我想知道为什么我建议的功能没有做它声称要做的事情。

【解决方案2】：

使用 jquery.unique() HERE。从 DOM 元素数组中删除重复项。

    var l = $('#options, #selected').find('li').get();

    var lists = jQuery.unique(l);

    // build your new lists w/ $('#options').html() etc...

编辑

HERE'S a working jsFiddle

因此，您需要确保在调用此方法时，您是在一个 DOM 元素数组上执行此操作，而不是在字符串或数字上。另外，请确保您使用的是 JQuery 别名 ($) 而不是 JQuery.methodName。包含的示例有效，剩下要做的就是将它与从加载列表函数创建的元素联系起来，然后在过滤后将它们吐回各自的 uls 中。

【讨论】：

我在 #selected 列表的接收事件上尝试了这个，但它不起作用。
感谢您的回复。我检查了小提琴，最终列表中仍然存在重复项。 li#o3 和 li#s3 仍然重复。
嗯，这是消除重复的一种方法，但这种方法的问题是它会完全破坏用户放置物品的任何顺序......这有点违背了使用的目的首先是 jQuery UI-Sortable，不是吗？

【解决方案3】：

如果你想基于检查 data-* 属性来做同样的解决方案。我刚遇到这个，希望对某人有所帮助。

receive: function (event, ui) {

    var identicalItemCount  = $(this).children("li[data-yourattribue='" + somevalue + "']").length;
    //alert(identicalItemCount);
    if (identicalItemCount > 1) {
        //alert("Ahem.... we have a duplicate!!");
        $(this).children("li[data-yourattribue='" + somevalue + "']").last().remove();
    } else {

        //your other stuff (like ajax calls, etc..)

    }

},

如果你做一些 ajax，比如在会话中保存一些额外的数据以及丢弃的项目，使用 .last() 删除实际丢弃的 droppable，而不是系统中已经存在的 droppable 也很有用。

【讨论】：

【解决方案4】：

无需再做任何事情或自定义编码是最容易实现的最佳概念

(function($) {
     
    $('.acd').sortable({
        connectWith: 'ul',
        receive: function(ev, ui) {
            if(ui.item.hasClass("number"))
              ui.sender.sortable("cancel");
        }
    });    
})(jQuery);

h2 { font-size:1.4em; margin: 20px 10px 0 20px; }
ul
{
    float: left;
    margin: 20px 10px 0 20px;
    border:1px solid #999;
    width: 100px;
    padding:10px;
    list-style-type:none;
}
li
{
    background: #fff;
    border: solid 1px #ccc;
    font-family: Arial, Tahoma, San-Serif;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https:////ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"/>

<h2>In this snippet the right column does not append the numeric items from left column</h2>
<ul id="list1" class="acd">
    <li>One</li>
    <li class="number">2</li>
    <li class="number">3</li>
</ul>
<ul id="list2" class="acd">
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

感谢 Majid Azani 通过演示链接 https://codepen.io/mj_azani/pen/npohF 提供了最佳解决方案

【讨论】：