JQuery用戶界面可排序 - 無重複允許

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。文本響應的解決方案：

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