1

私は次の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();
});

2つの問題を解決したいと思います。元のアイテムに「クラスを追加」し、再度追加できないようにすることで修正しようとした問題の1つ。だから問題：

  1. 項目が「お気に入り」リストに既に追加されている場合、あるリスト (「参加者」) の項目を別のリスト (「お気に入り」) に移動できないようにします。
  2. ("参加者") リストでドラッグ ドロップによる並べ替えを許可しないでください。

どんな助けでも大歓迎です。

4

1 に答える 1

2

さて、次のjQueryで両方の問題を解決しました。ソリューションのテキスト レスポンス:

  1. クラス「追加」が要素にある場合、それは重複しています。
  2. 「お気に入り」リストをソート可能にし、他のリスト「参加者」をドラッグ可能にしました。

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();
});
于 2012-05-17T17:14:16.873 に答える