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와 관련된 두 가지 문제점을 모두 해결했습니다. 솔루션에 대한 텍스트 응답 : 클래스가 '추가'하면 그 항목을 통해

1. I 루프가 추가 찾고, 그것은 중복 요소에 있습니다.
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(); 
});