Drag n drop - hinder certain rows from being dragged"

by Akram kamal

HTML

<table class="fooBar" width="200">
    <thead>
        <tr style="background-color:#ccc">
            <td><b>ColHeader1</b></td>
            <td><b>ColHeader2</b></td>
            <td><b>ColHeader3</b></td>
        </tr>
    </thead>
    <tbody>
        <tr class="section1 subhead">
            <td><b>Section1</b></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>CellData</td>
            <td>CellData</td>
            <td>CellData</td>
        </tr>
        <tr>
            <td>CellData</td>
            <td>CellData</td>
            <td>CellData</td>
        </tr>
    </tbody>

    <tbody>


        <tr class="section2 subhead">
            <td><b>Section2</b></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>CellData</td>
            <td>CellData</td>
            <td>CellData</td>
        </tr>
        <tr>
            <td>CellData</td>
            <td>CellData</td>
            <td>CellData</td>
        </tr>
    </tbody>

    <tbody>

        <tr class="section3 subhead">
            <td><b>Section3</b></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>CellData</td>
            <td>CellData</td>
            <td>CellData</td>
        </tr>
        <tr>
            <td>CellData</td>
            <td>CellData</td>
            <td>CellData</td>
        </tr>
    </tbody>


</table>

CSS

.ui-sortable-helper {
    display: table;
}

.selected {
    color: white
}

.section1 {
    background: blue
}

.section2 {
    background: green
}

.section3 {
    background: orange
}

.section1 ~ tr {
    background: blue
}

.section2 ~ tr {
    background: green
}

.section3 ~tr {
    background: orange
}

JavaScript

$(function() {
    $(".fooBar tbody").sortable({
        connectWith: ".fooBar tbody",
        items: '>tr:not(.subhead)',

        cursor: "move",
        axis: 'y',
        start: function(e, ui) {
            ui.item.addClass("selected");
        },
        stop: function(e, ui) {
            ui.item.removeClass("selected");
        },
    })

})