Question

如标题中所示，如何防止2个列表之间的重复。我试图在#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);
            }
        })
    });
});

Answer 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();
            }
        },
    });

Answer 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中。

Answer 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也是有用的。

Answer 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

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

4 个答案: