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/