4

如标题所示，如何防止两个列表之间出现重复。我正在尝试停止 #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);
            }
        })
    });
});
4

4 回答 4

8

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

 $("#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();
            }
        },
    });
于 2013-03-29T20:03:42.640 回答
0

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

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

    var lists = jQuery.unique(l);

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

编辑

这是一个工作的jsFiddle

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

于 2013-03-27T21:17:27.170 回答
0

如果您想基于检查 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 也很有用，而不是系统中已经存在的那个。

于 2014-07-03T01:54:07.280 回答
0

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

(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提供了最佳解决方案

于 2018-05-07T06:23:21.830 回答