JQuery UI可排序-不允许重复

Question

我有以下html：

<div id="cats-and-links">
    <div class="cat favorites">
        <h2>Favorites</h2>
            <ul class="ui-sortable">
               <li class="place-holder info">To add items to your favorites drag them over to this list from their original list.</li>
            </ul>
    </div>

    <div class="cat">
        <h2>Participants</h2>
        <ul class="ui-sortable">
            <li data-id="1"><a href="/program/2/control-panel/demo1">Demo 1</a></li>
            <li data-id="2"><a href="/program/2/control-panel/demo2">Demo 2</a></li>
            <li data-id="3"><a href="/program/2/control-panel/demo3">Demo 3</a></li>
            <li data-id="4"><a href="/program/2/control-panel/demo4">Demo 4</a></li>
            <li data-id="5"><a href="/program/2/control-panel/demo5">Demo 5</a></li>
        </ul>
    </div>
    <br class="clear">
</div>

我有以下jquery：

$(document).ready(function() {
    var place_holder = $('.place-holder');
    var fav = $('.favorites ul');
    var cat = $(".cat ul");

    cat.sortable({
            connectWith: fav,
            cursor:'move',
            helper:'original',
            placeholder:'ui-state-highlight',
            receive: function(event, ui){
                console.log(ui);
                ui.item.addClass('added');
                if(ui.item.hasClass('added')){
                    fav.sortable('option', 'revert', true);
                    cat.sortable('option', 'revert', true);
                }
                //console.log(ui.item.attr('data-id'));

                //ajax here to get the list item favorited.
            },
            over: function(event, ui){
                place_holder.hide();
            },
            stop: function(event, ui){
                if(fav.children().length == 1){
                    place_holder.show();
                }
            },
            remove: function(event, ui){
                ui.item.clone().appendTo(fav);
                $(this).sortable('cancel');
            }
    }).disableSelection();
});

我想解决两个问题。我试图解决的问题之一是“向原始项添加类”，而不让它再次添加。因此，问题是：

如果项目已经添加到“收藏夹”列表中，

1. 不允许从一个列表(“参与者”)移动到另一个列表(“收藏”)。
2. 不允许在(“参与者”)列表中拖放排序。

任何帮助都是非常感谢的。

Answer 1

好的，我已经用下面的jQuery解决了我的两个问题。解决方案的文本响应：

循环遍历寻找添加的项，如果类‘and’在元素上，则为duplicate.

• Made --“

1. ”列表可排序，而另一个列表“参与者”可拖动。

jQuery：

$(document).ready(function() {
    /*$('#cats-and-links').masonry({
          // set columnWidth a fraction of the container width
          columnWidth: function( containerWidth ) {
            return containerWidth / 4;
          },
          gutterWidth:10,
          isFitWidth:true,
          itemSelector:".cat"
    });*/
    var place_holder = $('.place-holder');
    var fav = $('.favorites ul');
    var cat = $(".cat:not(.favorites) ul li");

    cat.draggable({
        connectToSortable: fav,
        helper: "clone",
        revert: "invalid"
    });

    fav.sortable({
            cursor:'move',
            helper:'original',
            placeholder:'ui-state-highlight',
            receive: function(event, ui){
                console.log(ui);
                ui.item.addClass('added');
                if(ui.item.hasClass('added')){
                    $(this).children().each(function(){
                        if($(this).hasClass('added')){
                            $(this).remove();
                        }
                    });
                }
                //console.log(ui.item.attr('data-id'));

                //ajax here to get the list item favorited.
            },
            over: function(event, ui){
                place_holder.hide();
            },
            stop: function(event, ui){
                if(fav.children().length == 1){
                    place_holder.show();
                }
            }
    }).disableSelection();
});