jquery - To disable a partial selection in li while using sortable

Question

I have following code:

<style>
    .header { height:20px; width:100px; }
    .content { height:100px; width:100px; }
</style>

<script>
    $(function () {
        $("#sortable").sortable({
            axis: "y", 
            cursor: "move",
            update: function (event, ui) {
                //dosomething
            }
        });
    });
</script>

<ul class="sortable"> 
    <li class="ui-state-default” > <p class=”header”&gt;A</p> <p class=”content”&gt;a content</p> </li> 
    <li class="ui-state-default” ><p class=”header”&gt;B</p> <p class=”content”&gt;b content</p> </li> 
    <li class="ui-state-default” ><p class=”header”&gt;C</p> <p class=”content”&gt;c content</p> </li> 
</ul> 

I want to be able to sort li while I drag .header box only. The content box should also move together. The content box should be disable to drag around.

Can anyone help?

Answer 1

Use the handle property:

$("#sortable").sortable({
    axis: "y", 
    cursor: "move",
    handle: ".header",
    update: function (event, ui) {
        //dosomething
    }
});