拖动;下降重新排序

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

工作DEMO

试试这个

$("#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"
});

希望这有帮助，谢谢