Sortable Jquery Tree

by sarathsprakash

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css">
<script src="http://dl.dropbox.com/u/19593893/CDN/jquery-ui-1.8.16.custom.js"></script>
<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>
</div>

CSS

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

JavaScript

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