jquery - 拖放以重新排序

Question

我把我的代码放在这里 http://jsfiddle.net/yPQZx/394/

HTML

<div id="example5">
<ul>
    <li>Start</li>
    <li>TOC</li>
     <li >section 1
        <ul>
            <li>chapter 1
                <ul>
                   <li>sub chapter1</li>
                    <li>sub chapter2</li>
                </ul>
            </li>
            <li >chapter 2<ul></ul></li>
            <li >chapter 3<ul></ul></li>
         </ul>
     </li>
     <li >section 2<ul></ul></li>
     <li >section 3<ul></ul></li>
     <li >section 4<ul></ul></li>
</ul>

jQuery

$("#example5 ul").sortable({
    connectWith: "#example5 ul li",
    placeholder: "ui-state-highlight"
});

$("#example5 ul li ul ").sortable({
    connectWith: "#example5 ul li ul",
    placeholder: "ui-state-highlight"
});

CSS

  ul { min-height:10px; }
  li { width: 150px; }

任何人都可以帮助我实现这一目标：

1. 子章节只能在其章节或其他章节内移动，不能直接在章节下移动
2. 一章只能在其节或另一个节内移动，不能在章内移动，不能在节的同级内移动。
3. 当一个章节被移动时，它的所有子章节都会随之移动。
4. 一个节只能在根位置移动，不能在另一个节、章或子章内移动！

提前致谢。

Answer 1

工作演示

尝试这个

$("#example5>ul>li>ul ").sortable({
                connectWith: "#example5>ul>li>ul",
                placeholder: "ui-state-highlight"
});

$("#example5>ul>li>ul>li>ul ").sortable({
                connectWith: "#example5>ul>li>ul>li>ul",
                placeholder: "ui-state-highlight"
});
$("#example5>ul>li").sortable({
                connectWith: "#example5>ul>li",
                placeholder: "ui-state-highlight"
});
$("#example5>ul").sortable({
                connectWith: "#example5>ul",
                placeholder: "ui-state-highlight"
});

希望这会有所帮助，谢谢