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