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

我想解决两个问题。我试图通过“向原始项目添加一个类”并且不再让它再次添加来解决的问题之一。所以问题：

如果该项目已添加到“收藏夹”列表中，则不允许将一个列表中的项目（“参与者”）移动到其他列表（“收藏夹”）。
不允许在“参与者”列表中进行拖放排序。

非常感谢任何帮助。

Answer 1

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

我循环查找添加的项目，如果“添加”类在元素上是重复的。
使“收藏夹”列表可排序，其他列表“参与者”可拖动。

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

JQuery UI可排序 - 不允许重复

1 个答案: