여러 정렬 목록 jqueryui를 사용하여 항목 내가 JqueryUI.http를 사용하여 드래그/드롭/정렬 목록 두 쌍의가

Question

목록 그룹 사이에 혼합하지 않으 : //jqueryui.com/demos/sortable/

내 문제는 내가 item을 sortable1, sortable2에서 sortable3과 4로 옮길 수 있다는 것이다. 나는 그것들을 논쟁하기를 원한다. 따라서 항목은 (1과 2)와 (3과 4) 사이에서만 이동할 수 있습니다.

이 작업을 수행하려면 sortable3 및 sortable4에 다른 클래스를 할당해야합니까? 어쨌든 어떻게 든 기능을 결합 할 수 있습니까?

$(function() { 
     $("ul.droptrue").sortable({ 
      connectWith: "ul" 
     }); 

     $("ul.dropfalse").sortable({ 
      connectWith: "ul", 
      dropOnEmpty: false 
     }); 

     $("#sortable1, #sortable2").disableSelection(); 
     $("#sortable3, #sortable4").disableSelection(); 

}); 


<ul id="sortable1" class='droptrue'> 
    <li class="ui-state-default">Can be dropped..</li> 
    <li class="ui-state-default">..on an empty list</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable2" class='dropfalse'> 
    <li class="ui-state-highlight">Cannot be dropped..</li> 
    <li class="ui-state-highlight">..on an empty list</li> 
    <li class="ui-state-highlight">Item 3</li> 
    <li class="ui-state-highlight">Item 4</li> 
    <li class="ui-state-highlight">Item 5</li> 
</ul> 
<ul id="sortable3" class='droptrue'> 
    <li class="ui-state-default">Can be dropped..</li> 
    <li class="ui-state-default">..on an empty list</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable4" class='dropfalse'> 
    <li class="ui-state-highlight">Cannot be dropped..</li> 
    <li class="ui-state-highlight">..on an empty list</li> 
    <li class="ui-state-highlight">Item 3</li> 
    <li class="ui-state-highlight">Item 4</li> 
    <li class="ui-state-highlight">Item 5</li> 
</ul> 

Answer 1

가 있기 때문에 droptrue 및 dropfalse 매개 변수의

, 당신은 각 목록에 고유 ID의를 가지고 있다는 사실, 당신이 마크 업을 변경할 필요가 없습니다, 당신은 조금 다르게 .sortable 함수를 호출해야합니다

$("#sortable1").sortable({ 
     connectWith: "#sortable2" 
    }); 

    $("#sortable2").sortable({ 
     connectWith: "#sortable1", 
     dropOnEmpty: false 
    }); 

    $("#sortable3").sortable({ 
     connectWith: "#sortable4", 
    }); 

    $("#sortable4").sortable({ 
     connectWith: "#sortable3", 
     dropOnEmpty: false 
    }); 

다른 방법으로는 각 .sortable을 적용 할 매개 변수를 사용하여 각 정렬 항목의 매개 변수를 설정하고, 객체를 통해 반복하는 객체를 사용할 수 있습니다

var lists = [{"listid":"#sortable1", "connectid":"#sortable2", "drop":true}, 
{"listid":"#sortable2", "connectid":"#sortable1", "drop":false}, 
{"listid":"#sortable3", "connectid":"#sortable4", "drop":true}, 
{"listid":"#sortable4", "connectid":"#sortable3", "drop":false}]; 

$.each(lists, function(i, list) { 
    $(list.listid).sortable({ 
     connectWith: list.connectid, 
     dropOnEmpty: list.drop 
    }); 
}); 

편집 : 귀하의 의견을 바탕으로
, 이것은 당신이 (#sortable3와 #sortable4 모두에 연결 #sortable5) 또 다른 목록을 넥타이 수있는 방법입니다. 참고 쉼표로 구분 된 여러 아이디의 사용 : 게시하고이 응답에 대한 모든 사람에게

var lists = [{"listid":"#sortable1", "connectid":"#sortable2", "drop":true}, 
{"listid":"#sortable2", "connectid":"#sortable1", "drop":false}, 
{"listid":"#sortable3", "connectid":"#sortable4, #sortable5", "drop":true}, 
{"listid":"#sortable4", "connectid":"#sortable3, #sortable5", "drop":false}, 
{"listid":"#sortable5", "connectid":"#sortable3, #sortable4", "drop":false}]; 

Answer 2

감사합니다. 나는 비슷한 도전 과제를 가지고 있었고, 당신의 답은 그것을 해결하기 위해 내가 필요로했던 영감을주었습니다. 나도 여러 개의 정렬 가능한 목록을 가지고 있으며 정렬 그룹을 섞어 놓고 싶지 않습니다. 필자의 경우 그룹의 수는 데이터에 따라 다르므로 내가 얼마나 많이 가질 지 모릅니다. 여기에 내가 생각해 낸 해결책이있다.

$(function() {  
    if ($.cookie("sortGroupsCnt")) { 
     var grpcnt = Number($.cookie("sortGroupsCnt"));   
     for (i = 0; i < grpcnt; i++) { 
      var connectClass = ".s" + i; 
      $(connectClass).sortable({ 
       connectWith: connectClass, 
       dropOnEmpty: true 
      }).disableSelection(); 
     } 
    }; 

});

내 PHP 논리에서 각 정렬 그룹 내에서 동일한 클래스 코드로 여러 개의 UL을 모두 만듭니다. 따라서 그룹 1에서 모든 UL 클래스는 class = "s0"입니다. 그룹 2에서 모든 UL의 class = "s1"등입니다. 그런 다음 생성 된 정렬 그룹의 수인 "sortGroupCnt"라는 쿠키를 만듭니다.

다시 한 번 감사드립니다.