爲鋰禁用部分選擇同時使用排序

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> 

我希望能夠在我只拖.header箱排序li。內容框也應該一起移動。內容框應禁用拖動。

任何人都可以幫忙嗎？

Answer 1

使用handle屬性：

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