拖放以對其重新排序

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

希望對您有所幫助，謝謝