jQuery UI可排序。阻止一個特定物品掉入另一個特定物品？

Question

我有一個菜單，看起來有點像這樣。

<ul class="sortable"> 
    <li id="item1"> 
    <span class="grab"></span> 
    <!-- More stuff --> 
    </li> 
    <li id="item2"> 
    <span class="grab"></span> 
    <!-- More stuff --> 
    <ul> 
     <!-- Submenu Links --> 
    </ul> 
    </li> 
    <li id="item3"> 
    <span class="grab"></span> 
    <!-- More stuff --> 
    <ul> 
     <!-- Submenu Links --> 
    </ul> 
    </li> 
</ul> 

我已經做出這樣的排序。有多個菜單。一切工作，它排序，有一個Ajax事件要保存。它的全部可愛。

.item2和.item3是子菜單。子菜單和鏈接之間唯一的區別在於ul的存在。

雖然我的問題是我不希望子菜單能夠被放入其他子菜單中。他們可以移動到任何鏈接/子菜單的上方或下方。他們可以移動到任何菜單。他們不能被放入另一個子菜單。

$('.sortable').sortable({ 
    handle : '.grab', 
    items: "li:not(.no-sort)", 
    connectWith: '.sortable', 
    stop: function(event, ui) { 
     if (! $('.prompt.saveOrder').length) { 
      $('.prompt').remove(); 
      $('.content').prepend('<p class="prompt"><a href="'+window.location.pathname+'" class="saveOrder">Click here to save the order of your items</a></p>'); 
     } 
    }, 
    beforeStop: function(event, ui) { 
    } 
}); 

我很確定beforeStop是正確的功能。有誰知道我能做到這一點？我不介意添加一些額外的html來實現它。

任何幫助/建議將不勝感激。 「（ '不排序'。）不立」，`它

Answer 1

$('.sortable').sortable({ 
     handle: '.grab', 
     items: ".link", 
     connectWith: '.sortable', 
     stop: function(event, ui) { 
      if (!$('.prompt.saveOrder').length) { 
       $('.prompt').remove(); 
       $('.content').prepend('<p class="prompt"><a href="' + window.location.pathname + '" class="saveOrder">Click here to save the order of your items</a></p>'); 
      } 
     }, 
     beforeStop: function(event, ui) {} 
    }); 

Example Here