jQuery.sortable() 및 움직임 제한

Question

구현할 다소 복잡한 UI가 있습니다. 많은 드래그 앤 드롭. 그러나 DOM에는 그룹이 있으며 정렬이 가능하지만 항목을 다른 클래스 이름으로 지나치게 드래그하는 기능을 제한해야합니다.

예를 들어,이 Dom에서는 typea 항목 자체를 정렬 할 수 있지만 typeb 또는 typec 항목과 함께 사용할 수 없습니다.

더 많은 그룹화를 추가하면이 문제를 해결할 수 있다는 것을 알았지 만, 실제 DOM은 훨씬 더 복잡하며 더 많은 그룹으로 더 많이 집어 넣지는 않을 것입니다.

JSFiddle Example

<div id="sortable"> 
    <div class="typea">typea1</div> 
    <div class="typea">typea2</div> 
    <div class="typea">typea3</div> 
    <div class="typea">typea4</div> 

    <div class="typeb">typeb1</div> 
    <div class="typeb">typeb2</div> 
    <div class="typeb">typeb3</div> 
    <div class="typeb">typeb4</div> 
    <div class="typeb">typeb5</div> 

    <div class="typec">typec1</div> 
    <div class="typec">typec2</div> 
    <div class="typec">typec3</div> 
    <div class="typec">typec4</div> 
    <div class="typec">typec5</div> 
    <div class="typec">typec6</div> 
</div> 

Answer 1

당신은 (원래 요소와 동일합니다) 자리 표시의 클래스를 찾을 수, 정렬의 change event을 사용하고, 클래스가 일치하지 않으면 정렬 제한 할 수 있습니다.

$("#sortable").sortable({ 
    change:function(event,ui){ 
     var currentClass = $(ui.placeholder)[0].classList[0]; 
     if(!$(ui.placeholder).prev().hasClass(currentClass) 
      && !$(ui.placeholder).next().hasClass(currentClass)) 
      return false; 
    } 
}); 
$("#sortable").disableSelection(); 

DEMO : http://jsfiddle.net/dirtyd77/atd8s/1/