Liste teilweise sortieren

by juErik

HTML

<ul id="sortable1" class="connectedSortabl">
    <li>1</li>
    <li>2</li>
    <li>3
        <ul id="sortable2" class="connectedSortabl">
            <li>3.1</li>
            <li>3.2
                <ul id="sortable3" class="connectedSortabl">
                    <li>3.2.1</li>
                    <li>3.2.2</li>
                </ul>
            </li>
            <li>3.3
                <ul id="sortable4" class="connectedSortabl">
                    <li>3.3.1</li>
                    <li>3.3.2</li>
                </ul>
            </li>
            <li>3.4</li>
        </ul>
    </li>
    <li>4</li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 5px;
    padding: 5px;
    margin-bottom: 10px;
}
li {
    margin: 5px;
    padding: 5px;
    width: 150px;
    display:block;
}
ul li {
    background-color:#efefef;
}
ul li ul li {
    background-color:#567;
}
ul li ul li ul li {
    background-color:#abc;
}

JavaScript

/* Liste teilweise sortieren (3 wirkt wie ein risiger Anfasser)
   es können nur Zeilen verschoben werden, die eine bestimmte class haben ... */
$("#sortable1, #sorteable2, #sortable3, #sortable4").sortable({
    connectWith: ".connectedSortabl"
}).disableSelection();