jquery - 使用可排序时禁用 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”&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> 

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

任何人都可以帮忙吗？

Answer 1

使用handle属性：

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