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