在使用可排序时禁用li中的部分选择

Question

我有以下代码：

<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”>A</p> <p class=”content”>a content</p> </li> 
    <li class="ui-state-default” ><p class=”header”>B</p> <p class=”content”>b content</p> </li> 
    <li class="ui-state-default” ><p class=”header”>C</p> <p class=”content”>c content</p> </li> 
</ul> 

我希望能够在仅拖动li框时对.header进行排序。内容框也应该一起移动。应禁用内容框以拖动。

有人可以帮忙吗？

Answer 1

使用handle属性：

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